restore clipbord

src/client/js/components/RevisionComparer/RevisionComparer.jsx

@@ -1,11 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import {
+  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
+} from 'reactstrap';
+
 import { withUnstatedContainers } from '../UnstatedUtils';
 import RevisionComparerContainer from '../../services/RevisionComparerContainer';
 import RevisionDiff from '../PageHistory/RevisionDiff';
 
+/* eslint-disable react/prop-types */
+const DropdownItemContents = ({ title, contents }) => (
+  <>
+    <div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
+    <div className="card well mb-1 p-2">{contents}</div>
+  </>
+);
+/* eslint-enable react/prop-types */
+
 function encodeSpaces(str) {
   if (str == null) {
     return null;
@@ -17,7 +30,11 @@ function encodeSpaces(str) {
 
 const RevisionComparer = (props) => {
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const { t, revisionComparerContainer } = props;
+  function toggleDropdown() {
+    setDropdownOpen(!dropdownOpen);
+  }
 
   const pagePathUrl = () => {
     const { origin } = window.location;
@@ -36,7 +53,27 @@ const RevisionComparer = (props) => {
       <div className="d-flex">
         <h4 className="align-self-center">{ t('page_history.comparing_revisions') }</h4>
         {/* Page path URL */}
-        <CopyToClipboard text={pagePathUrl()} />
+        <Dropdown
+          className="grw-copy-dropdown align-self-center ml-auto"
+          isOpen={dropdownOpen}
+          toggle={() => toggleDropdown()}
+        >
+          <DropdownToggle
+            caret
+            className="d-block text-muted bg-transparent btn-copy border-0 py-0"
+          >
+            <i className="ti-clipboard"></i>
+          </DropdownToggle>
+          <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
+            {/* Page path URL */}
+            <CopyToClipboard text={pagePathUrl()}>
+              <DropdownItem className="px-3">
+                <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl()} />
+              </DropdownItem>
+            </CopyToClipboard>
+            <DropdownItem divider className="my-0"></DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
       </div>
 
       <div className="revision-compare-outer">