From a038b0733dc02d6cedcb922eba5e418acdef126e Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Wed, 6 Jan 2021 09:24:24 -0700
Subject: [PATCH] RolesContainer: make ID field CopyOnClick

---
 .../scripts/components/admin/roles/RolesContainer.tsx    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/scripts/components/admin/roles/RolesContainer.tsx b/resources/scripts/components/admin/roles/RolesContainer.tsx
index 6af5a5cab..b35b8dc5c 100644
--- a/resources/scripts/components/admin/roles/RolesContainer.tsx
+++ b/resources/scripts/components/admin/roles/RolesContainer.tsx
@@ -1,3 +1,4 @@
+import CopyOnClick from '@/components/elements/CopyOnClick';
 import React, { useEffect, useState } from 'react';
 import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 import { AdminContext } from '@/state/admin';
@@ -101,12 +102,18 @@ export default () => {
                                                         <RowCheckbox id={role.id}/>
                                                     </td>
 
-                                                    <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.id}</td>
+                                                    <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                        <CopyOnClick text={role.id.toString()}>
+                                                            <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code>
+                                                        </CopyOnClick>
+                                                    </td>
+
                                                     <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
                                                         <NavLink to={`${match.url}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
                                                             {role.name}
                                                         </NavLink>
                                                     </td>
+
                                                     <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
                                                 </TableRow>
                                             ))