From c366203d1fe1ba7aba2226b5a0d9b3076d835098 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 14 Oct 2020 22:48:10 +0200
Subject: [PATCH 1/6] New Fullscreen component

---
 .../src/buttons/OpenInFullscreenButton.tsx    |  50 +++++++++
 scm-ui/ui-components/src/buttons/index.ts     |   1 +
 .../src/modals/FullscreenModal.tsx            |  52 +++++++++
 scm-ui/ui-components/src/modals/Modal.tsx     |   2 +-
 scm-ui/ui-components/src/modals/index.ts      |   1 +
 scm-ui/ui-webapp/public/locales/de/repos.json |   6 +-
 scm-ui/ui-webapp/public/locales/en/repos.json |   6 +-
 .../components/content/SourcecodeViewer.tsx   | 103 ++++++------------
 .../src/repos/sources/containers/Content.tsx  |  52 +++++++--
 9 files changed, 190 insertions(+), 83 deletions(-)
 create mode 100644 scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
 create mode 100644 scm-ui/ui-components/src/modals/FullscreenModal.tsx

diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
new file mode 100644
index 0000000000..c1b4cab65e
--- /dev/null
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 * as React from "react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+
+type Props = {
+  onClick?: () => void;
+};
+
+const Button = styled.a`
+  width: 50px;
+  &:hover {
+    color: #33b2e8;
+  }
+`;
+
+const OpenInFullscreenButton: FC<Props> = ({ onClick }) => {
+  const [t] = useTranslation("repos");
+
+  return (
+    <Button title={t("diff.fullscreen.open")} className="button" onClick={onClick}>
+      <i className="fas fa-search-plus" />
+    </Button>
+  );
+};
+
+export default OpenInFullscreenButton;
diff --git a/scm-ui/ui-components/src/buttons/index.ts b/scm-ui/ui-components/src/buttons/index.ts
index 3949b333fe..cc7307572d 100644
--- a/scm-ui/ui-components/src/buttons/index.ts
+++ b/scm-ui/ui-components/src/buttons/index.ts
@@ -33,4 +33,5 @@ export { default as SubmitButton } from "./SubmitButton";
 export { default as DownloadButton } from "./DownloadButton";
 export { default as ButtonGroup } from "./ButtonGroup";
 export { default as ButtonAddons } from "./ButtonAddons";
+export { default as OpenInFullscreenButton } from "./OpenInFullscreenButton";
 export { default as RemoveEntryOfTableButton } from "./RemoveEntryOfTableButton";
diff --git a/scm-ui/ui-components/src/modals/FullscreenModal.tsx b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
new file mode 100644
index 0000000000..fb95712708
--- /dev/null
+++ b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 * as React from "react";
+import { FC, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal } from "./Modal";
+import Button from "../buttons/Button";
+import styled from "styled-components";
+
+type Props = {
+  title: string;
+  closeFunction: () => void;
+  body: ReactNode;
+  active: boolean;
+};
+
+const FullSizedModal = styled(Modal)`
+  & .modal-card {
+    width: 98%;
+    max-height: 100vh;
+  }
+`;
+
+const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active }) => {
+  const [t] = useTranslation("repos");
+  const footer = <Button label={t("diff.fullscreen.close")} action={closeFunction} color="grey" />;
+
+  return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
+};
+
+export default FullscreenModal;
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index 87badb5d4b..d7552ad898 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import {FC} from "react";
+import { FC } from "react";
 import classNames from "classnames";
 import usePortalRootElement from "../usePortalRootElement";
 import ReactDOM from "react-dom";
diff --git a/scm-ui/ui-components/src/modals/index.ts b/scm-ui/ui-components/src/modals/index.ts
index 8b79102558..3487d548a3 100644
--- a/scm-ui/ui-components/src/modals/index.ts
+++ b/scm-ui/ui-components/src/modals/index.ts
@@ -26,3 +26,4 @@
 
 export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert";
 export { default as Modal } from "./Modal";
+export { default as FullscreenModal } from "./FullscreenModal";
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index a1303555f4..988a181ee8 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -263,7 +263,11 @@
     "expandLastBottomByLines": "Bis zu {{count}} weitere Zeilen laden",
     "expandLastBottomComplete": "Alle verbleibenden Zeilen laden",
     "expanding": "Zeilen werden geladen ...",
-    "expansionFailed": "Fehler beim Laden der zusätzlichen Zeilen"
+    "expansionFailed": "Fehler beim Laden der zusätzlichen Zeilen",
+    "fullscreen": {
+      "open": "In Vollbildansicht öffnen",
+      "close": "Schließen"
+    }
   },
   "fileUpload": {
     "clickHere": "Klicken Sie hier um Ihre Datei hochzuladen.",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index bbc21d3cad..345bbcbd1c 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -270,7 +270,11 @@
     "expandLastBottomByLines": "load up to {{count}} more lines",
     "expandLastBottomComplete": "load all remaining lines",
     "expanding": "loading lines ...",
-    "expansionFailed": "Error while loading additional lines"
+    "expansionFailed": "Error while loading additional lines",
+    "fullscreen": {
+      "open": "Open in Fullscreen",
+      "close": "Close"
+    }
   },
   "fileUpload": {
     "clickHere": "Click here to select your file",
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
index 313e4c9ac8..080db32b2d 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
@@ -21,87 +21,54 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useEffect, useState } from "react";
 import { apiClient, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { File, Link } from "@scm-manager/ui-types";
 
-type Props = WithTranslation & {
+type Props = {
   file: File;
   language: string;
 };
 
-type State = {
-  content: string;
-  error?: Error;
-  loaded: boolean;
-  currentFileRevision: string;
-};
+const SourcecodeViewer: FC<Props> = ({ file, language }) => {
+  const [content, setContent] = useState("");
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+  const [currentFileRevision, setCurrentFileRevision] = useState("");
 
-class SourcecodeViewer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
+  useEffect(() => {
+    function fetchContent() {
+      getContent((file._links.self as Link).href)
+        .then(content => {
+          setLoading(false);
+          setContent(content);
+          setCurrentFileRevision(file.revision);
+        })
+        .catch(error => {
+          setLoading(false);
+          setError(error);
+        });
+    }
 
-    this.state = {
-      content: "",
-      loaded: false,
-      currentFileRevision: ""
-    };
-  }
-
-  componentDidMount() {
-    this.fetchContentIfChanged();
-  }
-
-  componentDidUpdate() {
-    this.fetchContentIfChanged();
-  }
-
-  private fetchContentIfChanged() {
-    const { file } = this.props;
-    const { currentFileRevision } = this.state;
     if (file.revision !== currentFileRevision) {
-      this.fetchContent();
+      fetchContent();
     }
+  });
+
+  if (loading) {
+    return <Loading />;
   }
 
-  fetchContent = () => {
-    const { file } = this.props;
-    getContent((file._links.self as Link).href)
-      .then(content => {
-        this.setState({
-          content,
-          loaded: true,
-          currentFileRevision: file.revision
-        });
-      })
-      .catch(error => {
-        this.setState({
-          error,
-          loaded: true
-        });
-      });
-  };
-
-  render() {
-    const { content, error, loaded } = this.state;
-    const language = this.props.language;
-
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
-
-    if (!loaded) {
-      return <Loading />;
-    }
-
-    if (!content) {
-      return null;
-    }
-
-    return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
+  if (error) {
+    return <ErrorNotification error={error} />;
   }
-}
+
+  if (!content) {
+    return null;
+  }
+
+  return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
+};
 
 export function getLanguage(language: string) {
   return language.toLowerCase();
@@ -111,4 +78,4 @@ export function getContent(url: string) {
   return apiClient.get(url).then(response => response.text());
 }
 
-export default withTranslation("repos")(SourcecodeViewer);
+export default SourcecodeViewer;
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 43ecf40e2b..7a2af3e2fa 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -28,7 +28,14 @@ import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { File, Repository } from "@scm-manager/ui-types";
-import { DateFromNow, ErrorNotification, FileSize, Icon } from "@scm-manager/ui-components";
+import {
+  DateFromNow,
+  ErrorNotification,
+  FileSize,
+  Icon,
+  OpenInFullscreenButton,
+  FullscreenModal
+} from "@scm-manager/ui-components";
 import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
@@ -48,6 +55,7 @@ type State = {
   collapsed: boolean;
   selected: SourceViewSelection;
   errorFromExtension?: Error;
+  showFullscreenModal: boolean;
 };
 
 const Header = styled.div`
@@ -82,6 +90,12 @@ const LighterGreyBackgroundTable = styled.table`
   background-color: #fbfbfb;
 `;
 
+const BorderLessDiv = styled.div`
+  margin: -1.25rem;
+  border: none;
+  box-shadow: none;
+`;
+
 export type SourceViewSelection = "source" | "history" | "annotations";
 
 class Content extends React.Component<Props, State> {
@@ -90,7 +104,8 @@ class Content extends React.Component<Props, State> {
 
     this.state = {
       collapsed: true,
-      selected: "source"
+      selected: "source",
+      showFullscreenModal: false
     };
   }
 
@@ -100,6 +115,18 @@ class Content extends React.Component<Props, State> {
     }));
   };
 
+  openModal = () => {
+    this.setState({
+      showFullscreenModal: true
+    });
+  };
+
+  closeModal = () => {
+    this.setState({
+      showFullscreenModal: false
+    });
+  };
+
   handleExtensionError = (error: Error) => {
     this.setState({
       errorFromExtension: error
@@ -129,6 +156,7 @@ class Content extends React.Component<Props, State> {
           </div>
           <div className="buttons is-grouped">
             {selector}
+            <OpenInFullscreenButton onClick={this.openModal} />
             <ExtensionPoint
               name="repos.sources.content.actionbar"
               props={{
@@ -209,25 +237,19 @@ class Content extends React.Component<Props, State> {
 
   render() {
     const { file, revision, repository, path, breadcrumb } = this.props;
-    const { selected, errorFromExtension } = this.state;
+    const { selected, errorFromExtension, showFullscreenModal } = this.state;
 
     const header = this.showHeader();
     let content;
     switch (selected) {
       case "source":
-        content = (
-          <SourcesView revision={revision} file={file} repository={repository} path={path}/>
-        );
+        content = <SourcesView revision={revision} file={file} repository={repository} path={path} />;
         break;
       case "history":
-        content = (
-          <HistoryView file={file} repository={repository}/>
-        );
+        content = <HistoryView file={file} repository={repository} />;
         break;
       case "annotations":
-        content = (
-          <AnnotateView file={file} repository={repository} />
-        );
+        content = <AnnotateView file={file} repository={repository} />;
     }
     const moreInformation = this.showMoreInformation();
 
@@ -238,6 +260,12 @@ class Content extends React.Component<Props, State> {
           <Header>{header}</Header>
           {moreInformation}
           {content}
+          <FullscreenModal
+            title={file?.name}
+            closeFunction={() => this.closeModal()}
+            body={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
+            active={showFullscreenModal}
+          />
         </div>
         {errorFromExtension && <ErrorNotification error={errorFromExtension} />}
       </div>

From ce56ec02d8190e640ee3b1c073d874fc46f7742e Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 15 Oct 2020 00:23:15 +0200
Subject: [PATCH 2/6] Add fullscreen option to diff view

---
 scm-ui/ui-components/src/repos/DiffFile.tsx | 47 ++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index b4ec64a8e8..71bfa4957b 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -33,7 +33,7 @@ import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
-import { MenuContext } from "@scm-manager/ui-components";
+import { MenuContext, OpenInFullscreenButton, FullscreenModal } from "@scm-manager/ui-components";
 import DiffExpander, { ExpandableHunk } from "./DiffExpander";
 import HunkExpandLink from "./HunkExpandLink";
 import { Modal } from "../modals";
@@ -57,6 +57,7 @@ type State = Collapsible & {
   sideBySide?: boolean;
   diffExpander: DiffExpander;
   expansionError?: any;
+  showFullscreenModal: boolean;
 };
 
 const DiffFilePanel = styled.div`
@@ -91,6 +92,10 @@ const ChangeTypeTag = styled(Tag)`
   margin-left: 0.75rem;
 `;
 
+const MarginlessModalContent = styled.div`
+  margin: -1.25rem;
+`;
+
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
     defaultCollapse: false,
@@ -103,7 +108,8 @@ class DiffFile extends React.Component<Props, State> {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
       diffExpander: new DiffExpander(props.file),
-      file: props.file
+      file: props.file,
+      showFullscreenModal: false
     };
   }
 
@@ -144,6 +150,18 @@ class DiffFile extends React.Component<Props, State> {
     );
   };
 
+  openModal = () => {
+    this.setState({
+      showFullscreenModal: true
+    });
+  };
+
+  closeModal = () => {
+    this.setState({
+      showFullscreenModal: false
+    });
+  };
+
   setCollapse = (collapsed: boolean) => {
     this.setState({
       collapsed
@@ -403,7 +421,7 @@ class DiffFile extends React.Component<Props, State> {
 
   render() {
     const { fileControlFactory, fileAnnotationFactory, t } = this.props;
-    const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
+    const { file, collapsed, sideBySide, diffExpander, expansionError, showFullscreenModal } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
@@ -426,7 +444,8 @@ class DiffFile extends React.Component<Props, State> {
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
-    const sideBySideToggle = file.hunks && file.hunks.length && (
+    const openInFullscreen = file?.hunks?.length ? <OpenInFullscreenButton onClick={this.openModal} /> : null;
+    const sideBySideToggle = file?.hunks?.length && (
       <MenuContext.Consumer>
         {({ setCollapsed }) => (
           <DiffButton
@@ -447,6 +466,7 @@ class DiffFile extends React.Component<Props, State> {
       <ButtonWrapper className={classNames("level-right", "is-flex")}>
         <ButtonGroup>
           {sideBySideToggle}
+          {openInFullscreen}
           {fileControls}
         </ButtonGroup>
       </ButtonWrapper>
@@ -464,8 +484,24 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
+    let modalContent;
+    if (file?.hunks?.length) {
+      modalContent = (
+        <FullscreenModal
+          title={this.renderFileTitle(file)}
+          closeFunction={() => this.closeModal()}
+          body={<MarginlessModalContent>{body}</MarginlessModalContent>}
+          active={showFullscreenModal}
+        />
+      );
+    }
+
     return (
-      <DiffFilePanel className={classNames("panel", "is-size-6")} collapsed={(file && file.isBinary) || collapsed} id={this.getAnchorId(file)}>
+      <DiffFilePanel
+        className={classNames("panel", "is-size-6")}
+        collapsed={(file && file.isBinary) || collapsed}
+        id={this.getAnchorId(file)}
+      >
         {errorModal}
         <div className="panel-heading">
           <FlexWrapLevel className="level">
@@ -484,6 +520,7 @@ class DiffFile extends React.Component<Props, State> {
           </FlexWrapLevel>
         </div>
         {body}
+        {modalContent}
       </DiffFilePanel>
     );
   }

From ed4a564677673421e92ca0c4442e69d922a8e40f Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 15 Oct 2020 00:38:29 +0200
Subject: [PATCH 3/6] Update CHANGELOG.md

---
 CHANGELOG.md                                | 4 ++++
 scm-ui/ui-components/src/repos/DiffFile.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 148eb799f3..ca5d9ede3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+### Added
+- Source code fullscreen view ([#1376](https://github.com/scm-manager/scm-manager/pull/1376))
+
 ## [2.7.1] - 2020-10-14
 ### Fixed
 - Null Pointer Exception on anonymous migration with deleted repositories ([#1371](https://github.com/scm-manager/scm-manager/pull/1371))
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 71bfa4957b..d8fee267df 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -488,7 +488,7 @@ class DiffFile extends React.Component<Props, State> {
     if (file?.hunks?.length) {
       modalContent = (
         <FullscreenModal
-          title={this.renderFileTitle(file)}
+          title={file.type === "delete" ? file.oldPath : file.newPath}
           closeFunction={() => this.closeModal()}
           body={<MarginlessModalContent>{body}</MarginlessModalContent>}
           active={showFullscreenModal}

From 27d4b0a755e4fb1cc31e68d4cbacb3e02037798d Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 20 Oct 2020 10:18:44 +0200
Subject: [PATCH 4/6] Fix review findings

---
 .../src/buttons/OpenInFullscreenButton.tsx    | 23 +++++++---
 scm-ui/ui-components/src/repos/DiffFile.tsx   | 40 ++++-------------
 .../components/content/SourcecodeViewer.tsx   | 23 ++++------
 .../src/repos/sources/containers/Content.tsx  | 44 +++++--------------
 4 files changed, 44 insertions(+), 86 deletions(-)

diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
index c1b4cab65e..afe16908f6 100644
--- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -22,12 +22,14 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import { FC } from "react";
+import { FC, ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import FullscreenModal from "../modals/FullscreenModal";
 
 type Props = {
-  onClick?: () => void;
+  modalTitle: string;
+  modalBody: ReactNode;
 };
 
 const Button = styled.a`
@@ -37,13 +39,22 @@ const Button = styled.a`
   }
 `;
 
-const OpenInFullscreenButton: FC<Props> = ({ onClick }) => {
+const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
   const [t] = useTranslation("repos");
+  const [showModal, setShowModal] = useState(false);
 
   return (
-    <Button title={t("diff.fullscreen.open")} className="button" onClick={onClick}>
-      <i className="fas fa-search-plus" />
-    </Button>
+    <>
+      <Button title={t("diff.fullscreen.open")} className="button" onClick={() => setShowModal(true)}>
+        <i className="fas fa-search-plus" />
+      </Button>
+      <FullscreenModal
+        title={modalTitle}
+        closeFunction={() => setShowModal(false)}
+        body={modalBody}
+        active={showModal}
+      />
+    </>
   );
 };
 
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index d8fee267df..77d44ec595 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -33,7 +33,7 @@ import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
-import { MenuContext, OpenInFullscreenButton, FullscreenModal } from "@scm-manager/ui-components";
+import { MenuContext, OpenInFullscreenButton } from "@scm-manager/ui-components";
 import DiffExpander, { ExpandableHunk } from "./DiffExpander";
 import HunkExpandLink from "./HunkExpandLink";
 import { Modal } from "../modals";
@@ -57,7 +57,6 @@ type State = Collapsible & {
   sideBySide?: boolean;
   diffExpander: DiffExpander;
   expansionError?: any;
-  showFullscreenModal: boolean;
 };
 
 const DiffFilePanel = styled.div`
@@ -108,8 +107,7 @@ class DiffFile extends React.Component<Props, State> {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
       diffExpander: new DiffExpander(props.file),
-      file: props.file,
-      showFullscreenModal: false
+      file: props.file
     };
   }
 
@@ -150,18 +148,6 @@ class DiffFile extends React.Component<Props, State> {
     );
   };
 
-  openModal = () => {
-    this.setState({
-      showFullscreenModal: true
-    });
-  };
-
-  closeModal = () => {
-    this.setState({
-      showFullscreenModal: false
-    });
-  };
-
   setCollapse = (collapsed: boolean) => {
     this.setState({
       collapsed
@@ -421,7 +407,7 @@ class DiffFile extends React.Component<Props, State> {
 
   render() {
     const { fileControlFactory, fileAnnotationFactory, t } = this.props;
-    const { file, collapsed, sideBySide, diffExpander, expansionError, showFullscreenModal } = this.state;
+    const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
@@ -444,7 +430,12 @@ class DiffFile extends React.Component<Props, State> {
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
-    const openInFullscreen = file?.hunks?.length ? <OpenInFullscreenButton onClick={this.openModal} /> : null;
+    const openInFullscreen = file?.hunks?.length ? (
+      <OpenInFullscreenButton
+        modalTitle={file.type === "delete" ? file.oldPath : file.newPath}
+        modalBody={<MarginlessModalContent>{body}</MarginlessModalContent>}
+      />
+    ) : null;
     const sideBySideToggle = file?.hunks?.length && (
       <MenuContext.Consumer>
         {({ setCollapsed }) => (
@@ -484,18 +475,6 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
-    let modalContent;
-    if (file?.hunks?.length) {
-      modalContent = (
-        <FullscreenModal
-          title={file.type === "delete" ? file.oldPath : file.newPath}
-          closeFunction={() => this.closeModal()}
-          body={<MarginlessModalContent>{body}</MarginlessModalContent>}
-          active={showFullscreenModal}
-        />
-      );
-    }
-
     return (
       <DiffFilePanel
         className={classNames("panel", "is-size-6")}
@@ -520,7 +499,6 @@ class DiffFile extends React.Component<Props, State> {
           </FlexWrapLevel>
         </div>
         {body}
-        {modalContent}
       </DiffFilePanel>
     );
   }
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
index 080db32b2d..2eae04c8a6 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
@@ -37,32 +37,25 @@ const SourcecodeViewer: FC<Props> = ({ file, language }) => {
   const [currentFileRevision, setCurrentFileRevision] = useState("");
 
   useEffect(() => {
-    function fetchContent() {
+    if (file.revision !== currentFileRevision) {
       getContent((file._links.self as Link).href)
         .then(content => {
-          setLoading(false);
           setContent(content);
           setCurrentFileRevision(file.revision);
-        })
-        .catch(error => {
           setLoading(false);
-          setError(error);
-        });
+        })
+        .catch(setError);
     }
-
-    if (file.revision !== currentFileRevision) {
-      fetchContent();
-    }
-  });
-
-  if (loading) {
-    return <Loading />;
-  }
+  }, [currentFileRevision, file]);
 
   if (error) {
     return <ErrorNotification error={error} />;
   }
 
+  if (loading) {
+    return <Loading />;
+  }
+
   if (!content) {
     return null;
   }
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 7a2af3e2fa..7f827f855a 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -21,21 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { ReactNode } from "react";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { File, Repository } from "@scm-manager/ui-types";
-import {
-  DateFromNow,
-  ErrorNotification,
-  FileSize,
-  Icon,
-  OpenInFullscreenButton,
-  FullscreenModal
-} from "@scm-manager/ui-components";
+import { DateFromNow, ErrorNotification, FileSize, Icon, OpenInFullscreenButton } from "@scm-manager/ui-components";
 import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
@@ -55,7 +48,6 @@ type State = {
   collapsed: boolean;
   selected: SourceViewSelection;
   errorFromExtension?: Error;
-  showFullscreenModal: boolean;
 };
 
 const Header = styled.div`
@@ -104,8 +96,7 @@ class Content extends React.Component<Props, State> {
 
     this.state = {
       collapsed: true,
-      selected: "source",
-      showFullscreenModal: false
+      selected: "source"
     };
   }
 
@@ -115,25 +106,13 @@ class Content extends React.Component<Props, State> {
     }));
   };
 
-  openModal = () => {
-    this.setState({
-      showFullscreenModal: true
-    });
-  };
-
-  closeModal = () => {
-    this.setState({
-      showFullscreenModal: false
-    });
-  };
-
   handleExtensionError = (error: Error) => {
     this.setState({
       errorFromExtension: error
     });
   };
 
-  showHeader() {
+  showHeader(content: ReactNode) {
     const { repository, file, revision } = this.props;
     const { selected, collapsed } = this.state;
     const icon = collapsed ? "angle-right" : "angle-down";
@@ -156,7 +135,10 @@ class Content extends React.Component<Props, State> {
           </div>
           <div className="buttons is-grouped">
             {selector}
-            <OpenInFullscreenButton onClick={this.openModal} />
+            <OpenInFullscreenButton
+              modalTitle={file?.name}
+              modalBody={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
+            />
             <ExtensionPoint
               name="repos.sources.content.actionbar"
               props={{
@@ -237,9 +219,8 @@ class Content extends React.Component<Props, State> {
 
   render() {
     const { file, revision, repository, path, breadcrumb } = this.props;
-    const { selected, errorFromExtension, showFullscreenModal } = this.state;
+    const { selected, errorFromExtension } = this.state;
 
-    const header = this.showHeader();
     let content;
     switch (selected) {
       case "source":
@@ -251,6 +232,7 @@ class Content extends React.Component<Props, State> {
       case "annotations":
         content = <AnnotateView file={file} repository={repository} />;
     }
+    const header = this.showHeader(content);
     const moreInformation = this.showMoreInformation();
 
     return (
@@ -260,12 +242,6 @@ class Content extends React.Component<Props, State> {
           <Header>{header}</Header>
           {moreInformation}
           {content}
-          <FullscreenModal
-            title={file?.name}
-            closeFunction={() => this.closeModal()}
-            body={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
-            active={showFullscreenModal}
-          />
         </div>
         {errorFromExtension && <ErrorNotification error={errorFromExtension} />}
       </div>

From 445d26e2b77d004de9b2a108239eaa44992ac732 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Tue, 20 Oct 2020 10:31:56 +0200
Subject: [PATCH 5/6] fix storyshots

---
 scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
index afe16908f6..4f5323a921 100644
--- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -48,12 +48,12 @@ const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
       <Button title={t("diff.fullscreen.open")} className="button" onClick={() => setShowModal(true)}>
         <i className="fas fa-search-plus" />
       </Button>
-      <FullscreenModal
+      {showModal && <FullscreenModal
         title={modalTitle}
         closeFunction={() => setShowModal(false)}
         body={modalBody}
         active={showModal}
-      />
+      />}
     </>
   );
 };

From 5889bb0365257187c2599c54db3d8121a0d8b10b Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 20 Oct 2020 10:49:56 +0200
Subject: [PATCH 6/6] Update storyshots

---
 .../src/__snapshots__/storyshots.test.ts.snap | 884 ++++++++++++++++++
 .../src/buttons/OpenInFullscreenButton.tsx    |  14 +-
 2 files changed, 892 insertions(+), 6 deletions(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index eec24b0966..9bbf3d36c6 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -3951,6 +3951,19 @@ exports[`Storyshots Diff Binaries 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -4219,6 +4232,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -4315,6 +4341,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -4411,6 +4450,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -4507,6 +4559,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -4603,6 +4668,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -4699,6 +4777,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -4804,6 +4895,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -4862,6 +4966,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -5703,6 +5820,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -6140,6 +6270,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -6577,6 +6720,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -6635,6 +6791,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -6702,6 +6871,19 @@ exports[`Storyshots Diff Default 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -7266,6 +7448,19 @@ exports[`Storyshots Diff Default 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -8107,6 +8302,19 @@ exports[`Storyshots Diff Default 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -8544,6 +8752,19 @@ exports[`Storyshots Diff Default 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -8981,6 +9202,19 @@ exports[`Storyshots Diff Default 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -10025,6 +10259,19 @@ exports[`Storyshots Diff Default 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -10546,6 +10793,19 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -11147,6 +11407,19 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -12085,6 +12358,19 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -12594,6 +12880,19 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -13103,6 +13402,19 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -14302,6 +14614,19 @@ exports[`Storyshots Diff Expandable 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -14860,6 +15185,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -15428,6 +15766,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -16273,6 +16624,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -16714,6 +17078,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -17155,6 +17532,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -18203,6 +18593,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -18728,6 +19131,19 @@ exports[`Storyshots Diff File Controls 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -19310,6 +19726,19 @@ exports[`Storyshots Diff File Controls 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -20169,6 +20598,19 @@ exports[`Storyshots Diff File Controls 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -20624,6 +21066,19 @@ exports[`Storyshots Diff File Controls 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -21079,6 +21534,19 @@ exports[`Storyshots Diff File Controls 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -22141,6 +22609,19 @@ exports[`Storyshots Diff File Controls 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
               <div
                 className="control"
               >
@@ -22680,6 +23161,19 @@ exports[`Storyshots Diff Hunks 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -23508,6 +24002,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -24084,6 +24591,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -24937,6 +25457,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -25374,6 +25907,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -25811,6 +26357,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -26855,6 +27414,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -27388,6 +27960,19 @@ exports[`Storyshots Diff OnClick 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -27992,6 +28577,19 @@ exports[`Storyshots Diff OnClick 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -28895,6 +29493,19 @@ exports[`Storyshots Diff OnClick 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -29362,6 +29973,19 @@ exports[`Storyshots Diff OnClick 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -29829,6 +30453,19 @@ exports[`Storyshots Diff OnClick 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -30949,6 +31586,19 @@ exports[`Storyshots Diff OnClick 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -31506,6 +32156,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -32163,6 +32826,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -33094,6 +33770,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -33583,6 +34272,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -34072,6 +34774,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -35285,6 +36000,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -35879,6 +36607,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -36443,6 +37184,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -37284,6 +38038,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -37721,6 +38488,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -38158,6 +38938,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -39202,6 +39995,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -39723,6 +40529,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -40324,6 +41143,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -41262,6 +42094,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -41771,6 +42616,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -42280,6 +43138,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -43479,6 +44350,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
                   </a>
                 </span>
               </div>
+              <div
+                className="control"
+              >
+                <a
+                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                  onClick={[Function]}
+                  title="diff.fullscreen.open"
+                >
+                  <i
+                    className="fas fa-search-plus"
+                  />
+                </a>
+              </div>
             </div>
           </div>
         </div>
diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
index 4f5323a921..70d4ee5ead 100644
--- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -48,12 +48,14 @@ const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
       <Button title={t("diff.fullscreen.open")} className="button" onClick={() => setShowModal(true)}>
         <i className="fas fa-search-plus" />
       </Button>
-      {showModal && <FullscreenModal
-        title={modalTitle}
-        closeFunction={() => setShowModal(false)}
-        body={modalBody}
-        active={showModal}
-      />}
+      {showModal && (
+        <FullscreenModal
+          title={modalTitle}
+          closeFunction={() => setShowModal(false)}
+          body={modalBody}
+          active={showModal}
+        />
+      )}
     </>
   );
 };