Add copy button to codeblocks

scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx

@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { SubSubtitle, ErrorNotification, Loading } from "@scm-manager/ui-components";
+import { SubSubtitle, ErrorNotification, Loading, PreformattedCodeBlock } from "@scm-manager/ui-components";
 import { useChangesets, useDefaultBranch } from "@scm-manager/ui-api";
 
 type Props = {
@@ -34,12 +34,18 @@ type Props = {
 
 const CloneInformation: FC<Props> = ({ url, repository }) => {
   const [t] = useTranslation("plugins");
-  const { data: changesets, error: changesetsError, isLoading: changesetsLoading } = useChangesets(repository, {
-    limit: 1
+  const {
+    data: changesets,
+    error: changesetsError,
+    isLoading: changesetsLoading,
+  } = useChangesets(repository, {
+    limit: 1,
   });
-  const { data: defaultBranchData, isLoading: defaultBranchLoading, error: defaultBranchError } = useDefaultBranch(
-    repository
-  );
+  const {
+    data: defaultBranchData,
+    isLoading: defaultBranchLoading,
+    error: defaultBranchError,
+  } = useDefaultBranch(repository);
 
   if (changesetsLoading || defaultBranchLoading) {
     return <Loading />;
@@ -49,56 +55,34 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
   const branch = defaultBranchData?.defaultBranch;
   const emptyRepository = (changesets?._embedded?.changesets.length || 0) === 0;
 
+  let gitCloneCommand = `git clone ${url}\ncd ${repository.name}`;
+  if (emptyRepository) {
+    gitCloneCommand += `\ngit checkout -b ${branch}`;
+  }
+  const gitCreateCommand =
+    `git init ${repository.name}\n` +
+    `cd ${repository.name}\n` +
+    `git checkout -b ${branch}\n` +
+    `echo "# ${repository.name}" > README.md\n` +
+    "git add README.md\n" +
+    'git commit -m "Add readme"\n' +
+    `git remote add origin ${url}\n` +
+    `git push -u origin ${branch}`;
+  const gitCommandCreate = `git remote add origin ${url}`;
+
   return (
     <div className="content">
       <ErrorNotification error={error} />
       <SubSubtitle>{t("scm-git-plugin.information.clone")}</SubSubtitle>
-      <pre>
-        <code>
-          git clone {url}
-          <br />
-          cd {repository.name}
-          {emptyRepository && (
-            <>
-              <br />
-              git checkout -b {branch}
-            </>
-          )}
-        </code>
-      </pre>
+      <PreformattedCodeBlock>{gitCloneCommand}</PreformattedCodeBlock>
       {emptyRepository && (
         <>
           <SubSubtitle>{t("scm-git-plugin.information.create")}</SubSubtitle>
-          <pre>
-            <code>
-              git init {repository.name}
-              <br />
-              cd {repository.name}
-              <br />
-              git checkout -b {branch}
-              <br />
-              echo "# {repository.name}
-              " &gt; README.md
-              <br />
-              git add README.md
-              <br />
-              git commit -m "Add readme"
-              <br />
-              git remote add origin {url}
-              <br />
-              git push -u origin {branch}
-              <br />
-            </code>
-          </pre>
+          <PreformattedCodeBlock>{gitCreateCommand}</PreformattedCodeBlock>
         </>
       )}
       <SubSubtitle>{t("scm-git-plugin.information.replace")}</SubSubtitle>
-      <pre>
-        <code>
-          git remote add origin {url}
-          <br />
-        </code>
-      </pre>
+      <PreformattedCodeBlock>{gitCommandCreate}</PreformattedCodeBlock>
     </div>
   );
 };

scm-plugins/scm-git-plugin/src/main/js/GitBranchInformation.tsx

@@ -24,7 +24,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
-import { SubSubtitle } from "@scm-manager/ui-components";
+import { PreformattedCodeBlock, SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   branch: Branch;
@@ -34,16 +34,15 @@ class GitBranchInformation extends React.Component<Props> {
   render() {
     const { branch, t } = this.props;
 
+    const gitFetchCommand = "git fetch";
+    const gitCheckoutCommand = "git checkout " + branch.name;
+
     return (
       <div>
         <SubSubtitle>{t("scm-git-plugin.information.fetch")}</SubSubtitle>
-        <pre>
-          <code>git fetch</code>
-        </pre>
+        <PreformattedCodeBlock>{gitFetchCommand}</PreformattedCodeBlock>
         <SubSubtitle>{t("scm-git-plugin.information.checkout")}</SubSubtitle>
-        <pre>
-          <code>git checkout {branch.name}</code>
-        </pre>
+        <PreformattedCodeBlock>{gitCheckoutCommand}</PreformattedCodeBlock>
       </div>
     );
   }

scm-plugins/scm-git-plugin/src/main/js/GitMergeInformation.tsx

@@ -25,7 +25,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { SubSubtitle } from "@scm-manager/ui-components";
+import { PreformattedCodeBlock, SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   repository: Repository;
@@ -37,35 +37,28 @@ class GitMergeInformation extends React.Component<Props> {
   render() {
     const { source, target, t } = this.props;
 
+    const gitCheckoutCommand = `git checkout ${target}`;
+    const gitUpdateCommand = "git pull";
+    const gitMergeCommand = `git merge ${source}`;
+    const gitResolveCommand = "git add <conflict file>";
+    const gitCommitCommand = `git commit -m "Merge ${source} into ${target}"`;
+    const gitPushCommand = "git push";
+
     return (
       <div>
         <SubSubtitle>{t("scm-git-plugin.information.merge.heading")}</SubSubtitle>
         {t("scm-git-plugin.information.merge.checkout")}
-        <pre>
-          <code>git checkout {target}</code>
-        </pre>
+        <PreformattedCodeBlock>{gitCheckoutCommand}</PreformattedCodeBlock>
         {t("scm-git-plugin.information.merge.update")}
-        <pre>
-          <code>git pull</code>
-        </pre>
+        <PreformattedCodeBlock>{gitUpdateCommand}</PreformattedCodeBlock>
         {t("scm-git-plugin.information.merge.merge")}
-        <pre>
-          <code>git merge {source}</code>
-        </pre>
+        <PreformattedCodeBlock>{gitMergeCommand}</PreformattedCodeBlock>
         {t("scm-git-plugin.information.merge.resolve")}
-        <pre>
-          <code>git add &lt;conflict file&gt;</code>
-        </pre>
+        <PreformattedCodeBlock>{gitResolveCommand}</PreformattedCodeBlock>
         {t("scm-git-plugin.information.merge.commit")}
-        <pre>
-          <code>
-            git commit -m "Merge {source} into {target}"
-          </code>
-        </pre>
+        <PreformattedCodeBlock>{gitCommitCommand}</PreformattedCodeBlock>
         {t("scm-git-plugin.information.merge.push")}
-        <pre>
-          <code>git push</code>
-        </pre>
+        <PreformattedCodeBlock>{gitPushCommand}</PreformattedCodeBlock>
       </div>
     );
   }

scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx

@@ -25,7 +25,7 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
-import { SubSubtitle } from "@scm-manager/ui-components";
+import { PreformattedCodeBlock, SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = {
   tag: Tag;
@@ -34,14 +34,12 @@ type Props = {
 const GitTagInformation: FC<Props> = ({ tag }) => {
   const [t] = useTranslation("plugins");
 
+  const gitCheckoutTagCommand = `git checkout tags/${tag.name} -b branch/${tag.name}`;
+
   return (
     <>
       <SubSubtitle>{t("scm-git-plugin.information.checkoutTag")}</SubSubtitle>
-      <pre>
-        <code>
-          git checkout tags/{tag.name} -b branch/{tag.name}
-        </code>
-      </pre>
+      <PreformattedCodeBlock>{gitCheckoutTagCommand}</PreformattedCodeBlock>
     </>
   );
 };