3007 api key UI

web/src/app/admin/AdminAPIKeys.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react'
+import makeStyles from '@mui/styles/makeStyles'
+import {
+  Button,
+  Grid,
+  Typography,
+  Card,
+  ButtonBase,
+  CardHeader,
+} from '@mui/material'
+import { Add } from '@mui/icons-material'
+import AdminAPIKeysDrawer from './admin-api-keys/AdminAPIKeyDrawer'
+import { GQLAPIKey } from '../../schema'
+import { Time } from '../util/Time'
+import { gql, useQuery } from 'urql'
+import FlatList, { FlatListListItem } from '../lists/FlatList'
+import Spinner from '../loading/components/Spinner'
+import { GenericError } from '../error-pages'
+import { Theme } from '@mui/material/styles'
+import AdminAPIKeyCreateDialog from './admin-api-keys/AdminAPIKeyCreateDialog'
+// query for getting existing API Keys
+const query = gql`
+  query gqlAPIKeysQuery {
+    gqlAPIKeys {
+      id
+      name
+      lastUsed {
+        time
+        ua
+        ip
+      }
+      expiresAt
+      allowedFields
+    }
+  }
+`
+const useStyles = makeStyles((theme: Theme) => ({
+  buttons: {
+    'margin-bottom': '15px',
+  },
+  containerDefault: {
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '100%',
+      transition: `max-width ${theme.transitions.duration.leavingScreen}ms ease`,
+    },
+  },
+  containerSelected: {
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '70%',
+      transition: `max-width ${theme.transitions.duration.enteringScreen}ms ease`,
+    },
+  },
+}))
+
+export default function AdminAPIKeys(): JSX.Element {
+  const classes = useStyles()
+  const [selectedAPIKey, setSelectedAPIKey] = useState<GQLAPIKey | null>(null)
+  const [createAPIKeyDialogClose, onCreateAPIKeyDialogClose] = useState(false)
+  // handles the openning of the create dialog form which is used for creating new API Key
+  const handleOpenCreateDialog = (): void => {
+    onCreateAPIKeyDialogClose(!createAPIKeyDialogClose)
+  }
+  // Get API Key triggers/actions
+  const [{ data, fetching, error }] = useQuery({ query })
+
+  if (error) {
+    return <GenericError error={error.message} />
+  }
+
+  if (fetching && !data) {
+    return <Spinner />
+  }
+
+  const items = data.gqlAPIKeys.map(
+    (key: GQLAPIKey): FlatListListItem => ({
+      selected: (key as GQLAPIKey).id === selectedAPIKey?.id,
+      highlight: (key as GQLAPIKey).id === selectedAPIKey?.id,
+      subText: (
+        <ButtonBase
+          onClick={() => {
+            setSelectedAPIKey(key)
+          }}
+          style={{ width: '100%', textAlign: 'left', padding: '5px 15px' }}
+        >
+          <Grid container>
+            <Grid item xs justifyContent='flex-start'>
+              <Typography gutterBottom variant='subtitle1' component='div'>
+                {key.name}
+              </Typography>
+              <Typography gutterBottom variant='subtitle2' component='div'>
+                <Time prefix='Expires At: ' time={key.expiresAt} />
+              </Typography>
+              <Typography gutterBottom variant='subtitle2' component='div'>
+                {key.allowedFields.length +
+                  ' allowed fields' +
+                  (key.allowedFields.some((f) => f.startsWith('Mutation.'))
+                    ? ''
+                    : ' (read-only)')}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Typography gutterBottom variant='subtitle2' component='div'>
+                <Time prefix='Last Used: ' time={key.expiresAt} />
+              </Typography>
+            </Grid>
+          </Grid>
+        </ButtonBase>
+      ),
+    }),
+  )
+
+  return (
+    <React.Fragment>
+      {selectedAPIKey ? (
+        <AdminAPIKeysDrawer
+          onClose={() => {
+            setSelectedAPIKey(null)
+          }}
+          apiKeyId={selectedAPIKey.id}
+        />
+      ) : null}
+      {createAPIKeyDialogClose ? (
+        <AdminAPIKeyCreateDialog
+          onClose={() => {
+            onCreateAPIKeyDialogClose(false)
+          }}
+        />
+      ) : null}
+      <Card
+        sx={{ width: '100%', padding: '0px' }}
+        className={
+          selectedAPIKey ? classes.containerSelected : classes.containerDefault
+        }
+      >
+        <CardHeader
+          title='API Key List'
+          component='h2'
+          sx={{ padding: '20px 25px 0px', margin: 0 }}
+          action={
+            <Button
+              data-cy='new'
+              variant='contained'
+              className={classes.buttons}
+              onClick={handleOpenCreateDialog}
+              startIcon={<Add />}
+            >
+              Create API Key
+            </Button>
+          }
+        />
+        <FlatList emptyMessage='No Data Available' items={items} />
+      </Card>
+    </React.Fragment>
+  )
+}

web/src/app/admin/admin-api-keys/AdminAPIKeyCreateDialog.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react'
+import { gql, useMutation } from 'urql'
+import { fieldErrors, nonFieldErrors } from '../../util/errutil'
+import FormDialog from '../../dialogs/FormDialog'
+import AdminAPIKeyForm from './AdminAPIKeyForm'
+import { CreateGQLAPIKeyInput } from '../../../schema'
+import { CheckCircleOutline as SuccessIcon } from '@mui/icons-material'
+import makeStyles from '@mui/styles/makeStyles'
+
+import { DateTime } from 'luxon'
+import { Grid, Typography, FormHelperText } from '@mui/material'
+import CopyText from '../../util/CopyText'
+// query for creating new api key which accepts CreateGQLAPIKeyInput param
+// return token created upon successfull transaction
+const newGQLAPIKeyQuery = gql`
+  mutation CreateGQLAPIKey($input: CreateGQLAPIKeyInput!) {
+    createGQLAPIKey(input: $input) {
+      id
+      token
+    }
+  }
+`
+
+const useStyles = makeStyles(() => ({
+  successIcon: {
+    marginRight: 8, // TODO: ts definitions are wrong, should be: theme.spacing(1),
+  },
+  successTitle: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+}))
+
+function AdminAPIKeyToken(props: { token: string }): React.ReactNode {
+  return (
+    <Grid item xs={12}>
+      <Typography>
+        <CopyText title={props.token} value={props.token} placement='bottom' />
+      </Typography>
+      <FormHelperText>
+        Please copy and save the token as this is the only time you'll be able
+        to view it.
+      </FormHelperText>
+    </Grid>
+  )
+}
+
+export default function AdminAPIKeyCreateDialog(props: {
+  onClose: () => void
+}): React.ReactNode {
+  const classes = useStyles()
+  const [value, setValue] = useState<CreateGQLAPIKeyInput>({
+    name: '',
+    description: '',
+    expiresAt: DateTime.utc().plus({ days: 7 }).toISO(),
+    allowedFields: [],
+    role: 'user',
+  })
+  const [status, createKey] = useMutation(newGQLAPIKeyQuery)
+  const token = status.data?.createGQLAPIKey?.token || null
+
+  // handles form on submit event, based on the action type (edit, create) it will send the necessary type of parameter
+  // token is also being set here when create action is used
+  const handleOnSubmit = (): void => {
+    createKey(
+      {
+        input: {
+          name: value.name,
+          description: value.description,
+          allowedFields: value.allowedFields,
+          expiresAt: value.expiresAt,
+          role: value.role,
+        },
+      },
+      { additionalTypenames: ['GQLAPIKey'] },
+    )
+  }
+
+  return (
+    <FormDialog
+      title={
+        token ? (
+          <div className={classes.successTitle}>
+            <SuccessIcon className={classes.successIcon} />
+            <Typography>Success!</Typography>
+          </div>
+        ) : (
+          'Create New API Key'
+        )
+      }
+      subTitle={token ? 'Your API key has been created!' : ''}
+      loading={status.fetching}
+      errors={nonFieldErrors(status.error)}
+      onClose={() => {
+        props.onClose()
+      }}
+      onSubmit={token ? props.onClose : handleOnSubmit}
+      alert={!!token}
+      disableBackdropClose={!!token}
+      form={
+        token ? (
+          <AdminAPIKeyToken token={token} />
+        ) : (
+          <AdminAPIKeyForm
+            errors={fieldErrors(status.error)}
+            value={value}
+            onChange={setValue}
+            create
+          />
+        )
+      }
+    />
+  )
+}

web/src/app/admin/admin-api-keys/AdminAPIKeyDeleteDialog.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { nonFieldErrors } from '../../util/errutil'
+import FormDialog from '../../dialogs/FormDialog'
+import { gql, useMutation, useQuery } from 'urql'
+import { GenericError } from '../../error-pages'
+import Spinner from '../../loading/components/Spinner'
+import { GQLAPIKey } from '../../../schema'
+
+// query for deleting API Key which accepts API Key ID
+const deleteGQLAPIKeyQuery = gql`
+  mutation DeleteGQLAPIKey($id: ID!) {
+    deleteGQLAPIKey(id: $id)
+  }
+`
+
+// query for getting existing API Keys
+const query = gql`
+  query gqlAPIKeysQuery {
+    gqlAPIKeys {
+      id
+      name
+    }
+  }
+`
+
+export default function AdminAPIKeyDeleteDialog(props: {
+  apiKeyId: string
+  onClose: (yes: boolean) => void
+}): JSX.Element {
+  const [{ fetching, data, error }] = useQuery({
+    query,
+  })
+  const { apiKeyId, onClose } = props
+  const [deleteAPIKeyStatus, deleteAPIKey] = useMutation(deleteGQLAPIKeyQuery)
+
+  if (fetching && !data) return <Spinner />
+  if (error) return <GenericError error={error.message} />
+
+  const apiKeyName = data?.gqlAPIKeys?.find((d: GQLAPIKey) => {
+    return d.id === apiKeyId
+  })?.name
+
+  const handleOnSubmit = (): void => {
+    deleteAPIKey(
+      {
+        id: apiKeyId,
+      },
+      { additionalTypenames: ['GQLAPIKey'] },
+    ).then((result) => {
+      if (!result.error) onClose(true)
+    })
+  }
+
+  return (
+    <FormDialog
+      title='Are you sure?'
+      confirm
+      subTitle={'This will delete the API Key ' + apiKeyName + '.'}
+      loading={deleteAPIKeyStatus.fetching}
+      errors={nonFieldErrors(deleteAPIKeyStatus.error)}
+      onClose={onClose}
+      onSubmit={handleOnSubmit}
+    />
+  )
+}