Copying user external IDs into clipboard on click.

Author: krulis-martin

src/components/Users/UsersName/UsersName.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { OverlayTrigger, Popover, Tooltip } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { defaultMemoize } from 'reselect';
 
 import AvatarContainer from '../../../containers/AvatarContainer/AvatarContainer';
@@ -129,10 +130,34 @@ const UsersName = ({
                             ))}
                           </tbody>
                         </table>
+                        <small className="text-muted">
+                          (
+                          <FormattedMessage
+                            id="app.userName.externalIdsClickInfo"
+                            defaultMessage="click to copy the ID(s) to clipboard"
+                          />
+                          )
+                        </small>
                       </Popover.Content>
                     </Popover>
                   }>
-                  <Icon icon={['far', 'id-card']} gapLeft className="text-muted half-opaque" />
+                  <CopyToClipboard
+                    text={Object.values(externalIds)
+                      .map(id => (Array.isArray(id) ? id.join(', ') : id))
+                      .join(', ')}>
+                    <Icon
+                      icon={['far', 'id-card']}
+                      gapLeft
+                      className="text-muted half-opaque clickable"
+                      style={{ '--fa-beat-scale': 1.5, '--fa-animation-duration': '0.3s' }}
+                      onClick={ev => {
+                        const style = 'fa-beat';
+                        const icon = ev.currentTarget;
+                        icon.classList.add(style);
+                        window.setTimeout(() => icon.classList.remove(style), 300);
+                      }}
+                    />
+                  </CopyToClipboard>
                 </OverlayTrigger>
               )}
               {privateData && privateData.email && showEmail === 'icon' && (

src/locales/cs.json

@@ -1940,6 +1940,7 @@
   "app.user.title": "Uživatelův profil",
   "app.userList.noUsers": "Žádní uživatelé nevyhovují zvoleným filtrům.",
   "app.userName.externalIds": "Externí identifikátory",
+  "app.userName.externalIdsClickInfo": "klikutím zkopírujete ID do schránky",
   "app.userName.userDeactivated": "Uživatelský účet byl deaktivován. Uživatel se nemůže přihlásit.",
   "app.userSwitching.loginAs": "Přihlásit jako",
   "app.users.createUser": "Vytvořit uživatele",

src/locales/en.json

@@ -1940,6 +1940,7 @@
   "app.user.title": "User's profile",
   "app.userList.noUsers": "No users match selected filters.",
   "app.userName.externalIds": "External identifiers",
+  "app.userName.externalIdsClickInfo": "click to copy the ID(s) to clipboard",
   "app.userName.userDeactivated": "The user account was deactivated. The user may not sign in.",
   "app.userSwitching.loginAs": "Login as",
   "app.users.createUser": "Create User",