apikey: allow copy as JSON and fix query formatting (#3434)

* allow copy as JSON and fix query formatting * update styling --------- Co-authored-by: Nathaniel Cook <[email protected]>
target · Nov 16, 2023 · 6f99b57 · 6f99b57
1 parent 8f045f4
commit 6f99b57
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyDrawer.tsx
@@ -180,7 +180,11 @@ export default function AdminAPIKeyDrawer(props: Props): JSX.Element {
               <ListItemText
                 primary='Query'
                 secondary={
-                  <Button variant='text' onClick={() => setShowQuery(true)}>
+                  <Button
+                    variant='outlined'
+                    onClick={() => setShowQuery(true)}
+                    sx={{ mt: 0.5 }}
+                  >
                     Show Query
                   </Button>
                 }

diff --git a/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx b/web/src/app/admin/admin-api-keys/AdminAPIKeyShowQueryDialog.tsx
@@ -4,7 +4,7 @@ import { gql, useQuery } from 'urql'
 import { GenericError } from '../../error-pages'
 import Spinner from '../../loading/components/Spinner'
 import { GQLAPIKey } from '../../../schema'
-import { Grid, Typography } from '@mui/material'
+import { Grid, useTheme } from '@mui/material'
 import CopyText from '../../util/CopyText'
 
 // query for getting existing API Keys
@@ -22,6 +22,7 @@ export default function AdminAPIKeyShowQueryDialog(props: {
   apiKeyID: string
   onClose: (yes: boolean) => void
 }): JSX.Element {
+  const theme = useTheme()
   const [{ fetching, data, error }] = useQuery({
     query,
   })
@@ -44,16 +45,37 @@ export default function AdminAPIKeyShowQueryDialog(props: {
       }
       loading={fetching}
       form={
-        <Grid item xs={12}>
-          <Typography sx={{ mb: 3 }}>
-            <code>
-              <CopyText
-                title={key.query}
-                value={key.query}
-                placement='bottom'
-              />
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <code
+              style={{
+                fontSize: 'large',
+                color: theme.palette.getContrastText(
+                  theme.palette.secondary.main,
+                ),
+              }}
+            >
+              <pre
+                style={{
+                  backgroundColor: theme.palette.secondary.main,
+                  padding: 12,
+                  borderRadius: 6,
+                }}
+              >
+                {key.query}
+              </pre>
             </code>
-          </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <CopyText title='Copy Query' value={key.query} placement='bottom' />
+          </Grid>
+          <Grid item xs={12}>
+            <CopyText
+              title='Copy Query (as JSON)'
+              value={JSON.stringify(key.query)}
+              placement='bottom'
+            />
+          </Grid>
         </Grid>
       }
       onClose={onClose}

diff --git a/web/src/app/util/CopyText.tsx b/web/src/app/util/CopyText.tsx
@@ -3,7 +3,7 @@ import makeStyles from '@mui/styles/makeStyles'
 import copyToClipboard from './copyToClipboard'
 import ContentCopy from 'mdi-material-ui/ContentCopy'
 import AppLink from './AppLink'
-import Tooltip, { TooltipProps } from '@mui/material/Tooltip'
+import { Typography, Tooltip, TooltipProps } from '@mui/material'
 
 const useStyles = makeStyles({
   copyContainer: {
@@ -52,7 +52,7 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
     )
   } else {
     content = (
-      <span
+      <Typography
         className={classes.copyContainer}
         role='button'
         tabIndex={0}
@@ -75,7 +75,7 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
           fontSize='small'
         />
         {props.title}
-      </span>
+      </Typography>
     )
   }