Страница репозитория: Popover для клонирования

src/features/repo-explorer/components/toolbar/clone-menu.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { CopyOutlined } from "@ant-design/icons";
+import { Button, Input, Tooltip } from "antd";
+
+type Props = { url: string };
+
+export default function CloneMenu({ url }: Props) {
+    const cloneField = useRef<Input>(null);
+    const [isUrlCopied, setUrlCopied] = useState<boolean | null>(null);
+    useEffect(() => {
+        if (isUrlCopied == null) return;
+        setTimeout(() => setUrlCopied(null), 1000);
+    }, [isUrlCopied]);
+
+    const copyUrl = useCallback(() => {
+        const input = cloneField.current?.input;
+        if (!input) return;
+        input.focus();
+        input.select();
+        try {
+            document.execCommand("copy");
+            setUrlCopied(true);
+        } catch (err) {
+            setUrlCopied(false);
+        } finally {
+            input.blur();
+        }
+    }, [cloneField]);
+
+    return (
+        <div className="clone-content">
+            <Input
+                ref={cloneField}
+                value={url}
+                onClick={(e) => e.currentTarget.select()}
+                addonAfter={
+                    <Tooltip
+                        title={isUrlCopied === false ? "Ошибка копирования" : "Скопировано"}
+                        placement="bottom"
+                        visible={isUrlCopied != null}
+                    >
+                        <Button onClick={copyUrl} icon={<CopyOutlined className="copy-button" />} />
+                    </Tooltip>
+                }
+            />
+        </div>
+    );
+}

src/features/repo-explorer/components/toolbar/index.scss

@@ -0,0 +1,15 @@
+.clone-content {
+    .ant-input {
+        min-width: 360px;
+        border-right: none;
+    }
+
+    .ant-input-group-addon {
+        padding: 0;
+        border: 0;
+    }
+
+    .copy-button {
+        border-radius: 0 2px 2px 0;
+    }
+}

src/features/repo-explorer/components/toolbar/index.tsx

@@ -1,7 +1,9 @@
+import { Button, Dropdown, Popover } from "antd";
 import React from "react";
-import { Button, Dropdown } from "antd";
 import { RepoIdentity } from "models";
 import BranchesMenu from "../branches-menu";
+import CloneMenu from "./clone-menu";
+import "./index.scss";
 
 type Props = {
     repo: RepoIdentity;
@@ -20,7 +22,14 @@ function RepoToolbar({ repo, branches, activeBranch }: Props) {
             >
                 <Button className="branch-dropdown">{activeBranch}</Button>
             </Dropdown>
-            <Button className="clone-btn">Clone</Button>
+            <Popover
+                placement="bottomRight"
+                title="Clone this repository"
+                trigger="click"
+                content={<CloneMenu url={`https://github.com/${repo.owner}/${repo.name}.git`} />}
+            >
+                <Button className="clone-btn">Clone</Button>
+            </Popover>
         </div>
     );
 }