@apollo-annotation/jbrowse-plugin-apollo 0.1.0

package/src/components/ManageChecks.tsx

@@ -0,0 +1,280 @@
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  Button,
+  Checkbox,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  MenuItem,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material'
+import { getRoot } from 'mobx-state-tree'
+import React, { useEffect, useState } from 'react'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import {
+  ApolloInternetAccount,
+  CollaborationServerDriver,
+} from '../BackendDrivers'
+import { ApolloSessionModel } from '../session'
+import { ApolloRootModel } from '../types'
+import { createFetchErrorMessage } from '../util'
+import { Dialog } from './Dialog'
+
+interface ManageChecksProps {
+  session: ApolloSessionModel
+  handleClose(): void
+}
+
+interface AssemblyDocument {
+  _id: string
+  name: string
+  checks: string[]
+}
+
+interface CheckDocument {
+  _id: string
+  name: string
+}
+
+export function ManageChecks({ handleClose, session }: ManageChecksProps) {
+  const { internetAccounts } = getRoot<ApolloRootModel>(session)
+  const [selectedAssembly, setSelectedAssembly] = useState<Assembly>()
+  const [errorMessage, setErrorMessage] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const apolloInternetAccounts = internetAccounts.filter(
+    (ia) => ia.type === 'ApolloInternetAccount',
+  ) as ApolloInternetAccountModel[]
+  if (apolloInternetAccounts.length === 0) {
+    throw new Error('No Apollo internet account found')
+  }
+  const [selectedInternetAccount, setSelectedInternetAccount] = useState(
+    apolloInternetAccounts[0],
+  )
+  const [checks, setChecks] = useState<CheckDocument[]>([])
+  const [selectedChecks, setSelectedChecks] = useState<string[]>([])
+
+  const { collaborationServerDriver } = session.apolloDataStore as {
+    collaborationServerDriver: CollaborationServerDriver
+    getInternetAccount(
+      assemblyName?: string,
+      internetAccountId?: string,
+    ): ApolloInternetAccount
+  }
+
+  const assemblies = collaborationServerDriver.getAssemblies()
+
+  useEffect(() => {
+    async function getChecks() {
+      const { baseURL, getFetcher } = selectedInternetAccount
+      const uri = new URL('/checks/types', baseURL).href
+      const apolloFetch = getFetcher({ locationType: 'UriLocation', uri })
+      const response = await apolloFetch(uri, { method: 'GET' })
+      if (!response.ok) {
+        const newErrorMessage = await createFetchErrorMessage(
+          response,
+          'Error when retrieving checks from server',
+        )
+        setErrorMessage(newErrorMessage)
+        return
+      }
+      const data = (await response.json()) as CheckDocument[]
+      setChecks(data)
+    }
+    getChecks().catch((error) => setErrorMessage(String(error)))
+  }, [selectedInternetAccount])
+
+  useEffect(() => {
+    if (assemblies.length > 0 && selectedAssembly === undefined) {
+      setSelectedAssembly(assemblies[0])
+    }
+  }, [assemblies, selectedAssembly])
+
+  useEffect(() => {
+    async function getChecks() {
+      if (!selectedAssembly) {
+        return
+      }
+      const { baseURL, getFetcher } = selectedInternetAccount
+      const uri = new URL(`/assemblies/${selectedAssembly.name}`, baseURL).href
+      const apolloFetch = getFetcher({ locationType: 'UriLocation', uri })
+      const response = await apolloFetch(uri, { method: 'GET' })
+      if (!response.ok) {
+        const newErrorMessage = await createFetchErrorMessage(
+          response,
+          'Error when retrieving assembly from server',
+        )
+        setErrorMessage(newErrorMessage)
+        return
+      }
+      const assembly = (await response.json()) as AssemblyDocument
+      setSelectedChecks(assembly.checks)
+    }
+    getChecks().catch((error) => setErrorMessage(String(error)))
+  }, [selectedAssembly, selectedInternetAccount])
+
+  function handleChangeAssembly(e: SelectChangeEvent<string>) {
+    const newAssembly = assemblies.find((asm) => asm.name === e.target.value)
+    setSelectedAssembly(newAssembly)
+  }
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!selectedAssembly) {
+      setErrorMessage('Must select assembly!')
+      return
+    }
+    const { notify } = session as unknown as AbstractSessionModel
+    const { baseURL, getFetcher } = selectedInternetAccount
+    const uri = new URL('/assemblies/checks', baseURL).href
+    const apolloFetch = getFetcher({
+      locationType: 'UriLocation',
+      uri,
+    })
+    const response = await apolloFetch(uri, {
+      method: 'POST',
+      body: JSON.stringify({
+        _id: selectedAssembly.name,
+        checks: selectedChecks,
+        name: '',
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    })
+    if (response.ok) {
+      notify('Assembly checks updated successfully', 'success')
+      handleClose()
+    } else {
+      const newErrorMessage = await createFetchErrorMessage(
+        response,
+        'Error when updating assembly checks',
+      )
+      setErrorMessage(newErrorMessage)
+    }
+    return
+  }
+
+  function handleCheckboxChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ): void {
+    const checks = [...selectedChecks]
+    const _id = e.target.value
+    if (checked) {
+      if (!checks.includes(_id)) {
+        checks.push(_id)
+        setSelectedChecks(checks)
+      }
+    } else {
+      const index = checks.indexOf(_id, 0)
+      if (index > -1) {
+        checks.splice(index, 1)
+      }
+      setSelectedChecks(checks)
+    }
+  }
+
+  function handleChangeInternetAccount(e: SelectChangeEvent<string>) {
+    setSubmitted(false)
+    const newlySelectedInternetAccount = apolloInternetAccounts.find(
+      (ia) => ia.internetAccountId === e.target.value,
+    )
+    if (!newlySelectedInternetAccount) {
+      throw new Error(
+        `Could not find internetAccount with ID "${e.target.value}"`,
+      )
+    }
+    setSelectedInternetAccount(newlySelectedInternetAccount)
+  }
+
+  return (
+    <Dialog
+      open
+      title="Manage Checks"
+      handleClose={handleClose}
+      data-testid="manage-checks"
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent>
+          {apolloInternetAccounts.length > 1 ? (
+            <>
+              <DialogContentText>Select account</DialogContentText>
+              <Select
+                value={selectedInternetAccount.internetAccountId}
+                onChange={handleChangeInternetAccount}
+                disabled={submitted && !errorMessage}
+              >
+                {internetAccounts.map((option) => (
+                  <MenuItem key={option.id} value={option.internetAccountId}>
+                    {option.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </>
+          ) : null}
+          <DialogContentText>Select assembly</DialogContentText>
+          <Select
+            style={{ width: 300 }}
+            labelId="label"
+            value={selectedAssembly?.name ?? ''}
+            onChange={handleChangeAssembly}
+            disabled={assemblies.length === 0}
+          >
+            {assemblies.map((option) => (
+              <MenuItem key={option.name} value={option.name}>
+                {option.displayName ?? option.name}
+              </MenuItem>
+            ))}
+          </Select>
+          <br />
+          <br />
+          <TableContainer component={Paper}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Check name</TableCell>
+                  <TableCell>Use check</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {checks.map((check) => (
+                  <TableRow key={check._id}>
+                    <TableCell>{check.name}</TableCell>
+                    <TableCell>
+                      <Checkbox
+                        value={check._id}
+                        checked={selectedChecks.includes(check._id)}
+                        onChange={handleCheckboxChange}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" type="submit">
+            Submit
+          </Button>
+          <Button variant="outlined" type="submit" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </form>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}

package/src/components/ManageUsers.tsx

@@ -0,0 +1,218 @@
+import { AbstractRootModel } from '@jbrowse/core/util'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material'
+import {
+  DataGrid,
+  GridActionsCellItem,
+  GridCellParams,
+  GridColDef,
+  GridRowId,
+  GridRowModel,
+  GridRowParams,
+  GridToolbar,
+} from '@mui/x-data-grid'
+import { DeleteUserChange, UserChange } from 'apollo-shared'
+import { getRoot } from 'mobx-state-tree'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { ChangeManager } from '../ChangeManager'
+import { ApolloSessionModel } from '../session'
+import { createFetchErrorMessage } from '../util'
+import { Dialog } from './Dialog'
+
+interface UserResponse {
+  _id: string
+  username: string
+  email: string
+  role?: '' | 'admin' | 'user' | 'readOnly'
+}
+
+interface ManageUsersProps {
+  session: ApolloSessionModel
+  handleClose(): void
+  changeManager: ChangeManager
+}
+
+interface ApolloRootModel extends AbstractRootModel {
+  internetAccounts: ApolloInternetAccountModel[]
+}
+
+export function ManageUsers({
+  changeManager,
+  handleClose,
+  session,
+}: ManageUsersProps) {
+  const { internetAccounts } = getRoot<ApolloRootModel>(session)
+  const apolloInternetAccounts = internetAccounts.filter(
+    (ia) => ia.type === 'ApolloInternetAccount' && ia.role?.includes('admin'),
+  )
+  if (apolloInternetAccounts.length === 0) {
+    throw new Error('No Apollo internet account found')
+  }
+  const [errorMessage, setErrorMessage] = useState('')
+  const [selectedInternetAccount, setSelectedInternetAccount] = useState(
+    apolloInternetAccounts[0],
+  )
+  const [users, setUsers] = useState<UserResponse[]>([])
+
+  const getUsers = useCallback(async () => {
+    const { baseURL } = selectedInternetAccount
+    const uri = new URL('/users', baseURL).href
+    const apolloFetch = selectedInternetAccount?.getFetcher({
+      locationType: 'UriLocation',
+      uri,
+    })
+    if (apolloFetch) {
+      const response = await apolloFetch(uri, { method: 'GET' })
+      if (!response.ok) {
+        const newErrorMessage = await createFetchErrorMessage(
+          response,
+          'Error when getting user data from db',
+        )
+        setErrorMessage(newErrorMessage)
+        return
+      }
+      const data = (await response.json()) as UserResponse[]
+      setUsers(data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)))
+    }
+  }, [selectedInternetAccount])
+
+  useEffect(() => {
+    getUsers().catch((error) => setErrorMessage(String(error)))
+  }, [getUsers])
+
+  async function deleteUser(id: GridRowId) {
+    const change = new DeleteUserChange({
+      typeName: 'DeleteUserChange',
+      userId: id as string,
+    })
+    await changeManager.submit(change, {
+      internetAccountId: selectedInternetAccount.internetAccountId,
+    })
+    setUsers((prevUsers) => prevUsers.filter((row) => row._id !== id))
+  }
+
+  function isCurrentUser(id: GridRowId) {
+    if (id === selectedInternetAccount.getUserId()) {
+      return true
+    }
+    return false
+  }
+
+  const gridColumns: GridColDef[] = [
+    { field: 'username', headerName: 'User', width: 140 },
+    { field: 'email', headerName: 'Email', width: 160 },
+    {
+      field: 'role',
+      headerName: 'Role',
+      width: 140,
+      type: 'singleSelect',
+      valueOptions: ['', 'readOnly', 'user', 'admin'],
+      editable: true,
+    },
+    {
+      field: 'actions',
+      type: 'actions',
+      getActions: (params: GridRowParams) => [
+        <GridActionsCellItem
+          key={`delete-${params.id}`}
+          icon={<DeleteIcon />}
+          onClick={async () => {
+            if (window.confirm('Delete this user?')) {
+              await deleteUser(params.id)
+            }
+          }}
+          disabled={isCurrentUser(params.id)}
+          label="Delete"
+        />,
+      ],
+    },
+  ]
+
+  function handleChangeInternetAccount(e: SelectChangeEvent<string>) {
+    const newlySelectedInternetAccount = apolloInternetAccounts.find(
+      (ia) => ia.internetAccountId === e.target.value,
+    )
+    if (!newlySelectedInternetAccount) {
+      throw new Error(
+        `Could not find internetAccount with ID "${e.target.value}"`,
+      )
+    }
+    setSelectedInternetAccount(newlySelectedInternetAccount)
+  }
+
+  async function processRowUpdate(newRow: GridRowModel) {
+    const change = new UserChange({
+      typeName: 'UserChange',
+      role: newRow.role,
+      userId: newRow._id,
+    })
+    await changeManager.submit(change, {
+      internetAccountId: selectedInternetAccount.internetAccountId,
+    })
+    return newRow
+  }
+
+  return (
+    <Dialog
+      open
+      fullScreen
+      title="Manage users"
+      handleClose={handleClose}
+      data-testid="manage-users"
+    >
+      <DialogContent>
+        {apolloInternetAccounts.length > 1 ? (
+          <>
+            <DialogContentText>Select account</DialogContentText>
+            <Select
+              value={selectedInternetAccount.internetAccountId}
+              onChange={handleChangeInternetAccount}
+              disabled={!errorMessage}
+            >
+              {internetAccounts.map((option) => (
+                <MenuItem key={option.id} value={option.internetAccountId}>
+                  {option.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </>
+        ) : null}
+        <div style={{ height: '100%', width: '100%' }}>
+          <DataGrid
+            pagination
+            rows={users}
+            columns={gridColumns}
+            getRowId={(row) => row._id}
+            slots={{ toolbar: GridToolbar }}
+            getRowHeight={() => 'auto'}
+            isCellEditable={(params: GridCellParams) =>
+              !isCurrentUser(params.id)
+            }
+            processRowUpdate={processRowUpdate}
+            onProcessRowUpdateError={(error) => setErrorMessage(String(error))}
+          />
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outlined" type="submit" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+      {errorMessage ? (
+        <DialogContent>
+          <DialogContentText color="error">{errorMessage}</DialogContentText>
+        </DialogContent>
+      ) : null}
+    </Dialog>
+  )
+}