GMOD / Apollo3

JBrowse 2 plugin for editing annotations on an Apollo server
Apache License 2.0
7 stars 4 forks source link

Begin user management UI #142

Closed garrettjstevens closed 1 year ago

garrettjstevens commented 2 years ago

Create a new React component that will be used to manage users in packages/jbrowse-plugin-apollo/src/components/. This component will be accessed by adding a menu item under the top-level "Apollo" menu that launches a dialog with this component in it. The "View change log" menu item in packages/jbrowse-plugin-apollo/src/index.ts and component in packages/jbrowse-plugin-apollo/src/components/ViewChangeLog.tsx are probably good examples to use to see how to add a menu item that opens a component.

For the first version, this component can work on some hard-coded data, something like this:

const users = [
  { id: 'user0123', email: '0123@demo.com', role: 'read-only' },
  { id: 'user4567', email: '4567@demo.com', role: 'user' },
  { id: 'user8910', email: '8910@demo.com', role: 'admin' },
]

The users should be in an MUI data grid, with non-editable columns for "id" and "email", an editable column for "role" (possible choices are "read-only", "user", and "admin", and a column with a delete button.

Some useful demos for the data grid: General grid: https://mui.com/x/react-data-grid/#mit-version Delete column: https://mui.com/x/react-data-grid/column-definition/#special-properties

haessar commented 2 years ago

I've pushed a basic Manage Users panel using the Data Grid and presenting just the dummy data - i.e. don't have the editable role or delete buttons yet. Will polish off on Tuesday.