@scm-manager/ui-components 2.28.1-20220006-094218 → 2.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.28.1-20220006-094218",
+  "version": "2.29.0",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.28.1-20220006-094218",
+    "@scm-manager/ui-tests": "^2.29.0",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -65,9 +65,9 @@
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.28.1-20220006-094218",
-    "@scm-manager/ui-extensions": "^2.28.1-20220006-094218",
-    "@scm-manager/ui-types": "^2.28.1-20220006-094218",
+    "@scm-manager/ui-api": "^2.29.0",
+    "@scm-manager/ui-extensions": "^2.29.0",
+    "@scm-manager/ui-types": "^2.29.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Breadcrumb.tsx

@@ -69,22 +69,15 @@ const BreadcrumbNav = styled.nav`
   width: 100%;
 
   /* move slash to end */
-
   li + li::before {
     content: none;
   }
 
-  li:not(:last-child)::after {
-    color: #b5b5b5; //$breadcrumb-item-separator-color
-    content: "\\0002f";
-  }
-
   li:first-child {
     margin-left: 0.75rem;
   }
 
   /* sizing of each item */
-
   li {
     max-width: 375px;
 
@@ -111,11 +104,6 @@ const ActionBar = styled.div`
   }
 `;
 
-// TODO ersetzen?
-const PrefixButton = styled.div`
-  border-right: 1px solid lightgray;
-`;
-
 const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; current?: boolean }> = ({
   clickable,
   text,
@@ -198,7 +186,7 @@ const Breadcrumb: FC<Props> = ({
   const renderBreadcrumbNav = () => {
     let prefixButtons = null;
     if (preButtons) {
-      prefixButtons = <PrefixButton className="mr-2">{preButtons}</PrefixButton>;
+      prefixButtons = <div className="mr-2 prefix-button">{preButtons}</div>;
     }
 
     let homeUrl = baseUrl + "/";

package/src/Logo.stories.tsx

@@ -26,7 +26,6 @@ import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Logo from "./Logo";
 
-// TODO Ersetzen?
 const Wrapper = styled.div`
   padding: 2em;
   background-color: black;

package/src/SyntaxHighlighter.tsx

@@ -31,9 +31,21 @@ import { useLocation } from "react-router-dom";
 import { urls } from "@scm-manager/ui-api";
 import createSyntaxHighlighterRenderer from "./SyntaxHighlighterRenderer";
 import useScrollToElement from "./useScrollToElement";
+import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import copyToClipboard from "./CopyToClipboard";
 
 const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/;
 
+const Container = styled.div`
+  position: relative;
+`;
+const TopRightButton = styled.button`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
 type Props = {
   language?: string;
   value: string;
@@ -44,6 +56,8 @@ type Props = {
 const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumbers = true, value, permalink }) => {
   const location = useLocation();
   const [contentRef, setContentRef] = useState<HTMLElement | null>();
+  const [copied, setCopied] = useState(false);
+  const [t] = useTranslation("commons");
 
   useScrollToElement(
     contentRef,
@@ -56,6 +70,10 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
     value
   );
 
+  const copy = () => {
+    copyToClipboard(value).then(() => setCopied(true));
+  };
+
   const createLinePermaLink = (lineNumber: number) =>
     window.location.protocol +
     "//" +
@@ -64,17 +82,25 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
 
   const defaultRenderer = createSyntaxHighlighterRenderer(createLinePermaLink, showLineNumbers);
 
+  let valueWithoutTrailingLineBreak = value;
+  if (value && value.length > 1 && value.endsWith("\n")) {
+    valueWithoutTrailingLineBreak = value.substr(0, value.length - 1);
+  }
+
   return (
-    <div ref={setContentRef}>
+    <Container ref={setContentRef}>
       <ReactSyntaxHighlighter
         showLineNumbers={false}
         language={determineLanguage(language)}
         style={highlightingTheme}
         renderer={defaultRenderer}
       >
-        {value}
+        {valueWithoutTrailingLineBreak}
       </ReactSyntaxHighlighter>
-    </div>
+      <TopRightButton title={t("syntaxHighlighting.copyButton")} onClick={copy}>
+        <i className={copied ? "fa fa-clipboard-check" : "fa fa-clipboard"} />
+      </TopRightButton>
+    </Container>
   );
 };
 

package/src/__snapshots__/storyshots.test.ts.snap

@@ -67,7 +67,7 @@ exports[`Storyshots BreadCrumb Default 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <ul>
         <li>
@@ -176,7 +176,7 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <ul>
         <li>
@@ -335,7 +335,7 @@ exports[`Storyshots BreadCrumb Not clickable 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <ul>
         <li>
@@ -425,10 +425,10 @@ exports[`Storyshots BreadCrumb With prefix button 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <div
-        className="Breadcrumb__PrefixButton-zvtb4t-4 fsMznZ mr-2"
+        className="mr-2 prefix-button"
       >
         <a
           href="#link"
@@ -4613,7 +4613,9 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
       </p>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -4694,41 +4696,20 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
                   style={Object {}}
                 >
                   Code without Language!
-
                 </span>
               </span>
             </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-2"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                2
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
-              </span>
-            </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -5781,7 +5762,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       </p>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -6929,45 +6912,19 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
                 >
                   }
                 </span>
-                <span
-                  style={Object {}}
-                >
-                  
-
-                </span>
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-16"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                16
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
       
 
@@ -14879,7 +14836,9 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
     
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -15252,39 +15211,19 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 &lt;/plugins&gt;
 
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-12"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                12
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
       
   
@@ -16461,7 +16400,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       </p>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -17609,45 +17550,19 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
                 >
                   }
                 </span>
-                <span
-                  style={Object {}}
-                >
-                  
-
-                </span>
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-16"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                16
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
       
 
@@ -17844,7 +17759,9 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
       </h1>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -19256,45 +19173,19 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                 >
                   &gt;
                 </span>
-                <span
-                  style={Object {}}
-                >
-                  
-
-                </span>
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-24"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                24
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -75396,7 +75287,9 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -76757,45 +76650,19 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
             >
               }
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-18"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            18
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -76804,7 +76671,9 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -79709,45 +79578,19 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
             >
               }
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-32"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            32
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -79756,7 +79599,9 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -80556,45 +80401,19 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
             >
               ;
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-8"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            8
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -80603,7 +80422,9 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -88564,41 +88385,20 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
               style={Object {}}
             >
                dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure.
-
             </span>
           </span>
         </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-172"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            172
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
-          </span>
-        </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -88607,7 +88407,9 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -90058,45 +89860,19 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
             >
               )
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-21"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            21
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -90105,7 +89881,9 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -92452,27 +92230,19 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
             >
               }
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-32"
-        >
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;

package/src/repos/annotate/AnnotatePopover.tsx

@@ -113,7 +113,7 @@ const AnnotatePopover: FC<PopoverProps> = ({ annotation, offsetTop, repository,
       ref={ref}
       onMouseEnter={onMouseEnter}
       onMouseLeave={OnMouseLeave}
-      className="box"
+      className="popover box"
       style={{ top: `${top}px` }}
     >
       <PopoverHeading className="is-clearfix">