Rafiki Admin UI feature

[JoblersTune]

Changes proposed in this pull request

• Adds an admin UI for the GraphQL interface for Rafiki backend. The first version of this UI will simply support viewing, updating, editing and possibly deleting peers and assets.

Useful resources:

• Loom video to demo Rafiki Admin UI: https://www.loom.com/share/e66a8bbbf72a40ecbbe600c3f9a6cbca (cut short due to 5 min time limit)
• Loom video discussing frameworks and code: Part 1: https://www.loom.com/share/f9f0be85f7b444e79a1155804d52aecf & Part 2: https://www.loom.com/share/c898fe056a294268b0ef16029d0a0015
• Loom video discussing outstanding TODOs and future vision: https://www.loom.com/share/7385032d9ad245f68f0a8c45597de010

The next version of this should also include:

• A log in feature
• Access to search incoming payments, outgoing payments, and quotes.

Context

• fixes Design Rafiki Admin UI #510
• Rafiki: Admin UI - Assets & Peers roadmap#9

Checklist

• Related issues linked using fixes #number
• Tests added/updated
• Documentation added
• Make sure that all checks pass

[JoblersTune]

This is a work in progress. Looking for initial feedback so long @cairin.

See Figma designs here https://www.figma.com/file/0ditBzfQRxx3LW258NJbWZ/Rafiki-Admin-UI?node-id=0%3A1&t=jaqV3tB4HZqaflTJ-1

I'd appreciate some feedback on these specific points as well as general feedback:

• Is there a good CSS framework to use instead of node-sass?
  The node-sass dependency is taking too long during the pnpm fetch step in the Dockerfiles used for GitHub Actions. It is a dev dependency used to build CSS files from the SCSS files. The current plan is simply to remove this dependency and the SCSS files, leaving the CSS files in, and rather changing to a different framework like TailwindCSS. To remove the SCSS dependency first build the CSS files by running pnpm scss then the README needs to updated to remove that step. The package.json file needs to remove the scss step and remove that from the build step and uninstall the node-sass dev dependency. All SCSS files must be deleted. app/styles/dist needs to be removed from the .gitignore file so that the CSS files will be committed. And of course the pnpm lockfile will need to be updated.
• Advice on how to move to an input validation model that uses the errors returned from GraphQL queries directly.
• Do we need to sanitise any input?
• Is there a way to use the GraphQL schema to make the asset/peer creation forms or item display automatic instead of coding it all and making it fragile to future changes in the Rafiki backend code?
• Currently just hard coding all text, should I be making it translatable?
• To create or update peers one of the inputs accepts a list of incoming auth tokens. Is it best to have the incoming auth tokens as a comma separated list or should there be a plus icon to add each separately? If we do a comma separated list then we should communicate that to users, or also also just spaces as separators. Trying to think what gives the best user experience here.
• When updating a peer should we display the auth tokens on the admin UI? Or are there security concerns about doing that?

To give a sense of the outstanding TODO's:

• Check all TODO: comments in packages/admin folder
• Global search bar - the search bar functionality should search across peer id/name and asset id, and search over asset code on any page. Currently it only searches asset by ID on asset pages and peer by ID on peer pages.
• Do some basic sanitisation in an action function for the search input
• Once the full search functionality is in place the assets and peers page tables should also be sort-able by appropriate column headers, like asset code, etc. I.e if you click on on the asset code header the results will appear in order of asset codes.
• Finalise validation functions - need to implement a URL regex check on outgoing HTTP endpoints.
• The idea is to use messages returned by GraphQL for validation instead of having separate validation functions for the admin UI project.
• Add a message if there are no peers or assets to display instead of showing an empty table.
• Peer and asset deletion functionality has not yet been implemented on Rafiki backend
• Create a Rafki Admin UI favicon (I have added a suggested option)
• Create tests (is Jest the preferred framework?)
• Implement a different styling framework like TailwindCSS for example
• Improve mobile view (optional)

Peer TODO's:

• Add in name field - have either name / id display on peers page.
• Add name field to create peer form.
• Add name field to update peer form.
• Update peer form is still a work in progress.
• Add a message about a successful peer creation/update when displaying a new/updated peer after a successful mutation
• Implement paging on peers page.
• implement drop down for asset selection in peer creation - asset creation is now explicit Make asset creation explicit #155
• Soon only incoming or outgoing HTTP fields will be required for peer creation (or both). Currently incoming is optional and outgoing is required. But this will change shortly.

Asset TODO's:

• Implement paging on assets page
• Add a message about a successful asset creation/update when displaying a new/updated asset after a successful mutation

[cairin]

This is looking good so far @SarahCoilAccount

I will go through the code and provide specific feedback there, but to answer some of your general questions:

Is there a good CSS framework to use instead of node-sass

Yes, definitely use tailwindcss. There are alternative utility based css frameworks, but this one has the biggest community, and has the most stable API out of the ones I've used.

Tailwind also works well with headless UI component libraries like headlessui or radix-ui.

And also specifically in relation to typing input validation.

What you're trying to achieve with input validation is end-to-end type safety. Basically put, if you're expecting a string value in the backend, you want to ensure that you're sending a string input from the frontend. https://www.epicweb.dev/fully-typed-web-apps - This should help you get the right idea of what you're trying to achieve.

To start you'll probably want generated typings of the graphql api. This is already done for you in the backend using codegen. You could probably just get it to generate the same output directly into the admin project. You'll then at least know what types you're expecting, and if the backend changes, the admin code will change too.

You can then use the apollo graphql client to type your responses too:

rafiki/packages/mock-account-provider/app/lib/webhooks.server.ts

Lines 83 to 105 in 483e794

	await apolloClient
	.mutate({
	mutation: gql`
	mutation DepositLiquidity($eventId: String!) {
	depositEventLiquidity(eventId: $eventId) {
	code
	success
	message
	error
	}
	}
	`,
	variables: {
	eventId: wh.id
	}
	})
	.then((query): LiquidityMutationResponse => {
	if (query.data) {
	return query.data.depositEventLiquidity
	} else {
	throw new Error('Data was empty')
	}
	})

Do we need to sanitise any input?

I think apart from providing the correct types, you shouldn't need to. The backend should be sanitising input and responding with validation errors as necessary. It's easier to rely on the backend for this, because if you're sanitising on the frontend, you could over/under sanitise and you'll have to handle validation responses from the backend anyway. For things like search you might want to do some basic sanitisation in an action.

Is there a way to use the GraphQL schema to make the asset/peer creation forms or item display automatic instead of coding it all and making it fragile to future changes in the Rafiki backend code?

Answered in brief above. You can use the backend as a reference for setting up the generation and graphql client.

Currently just hard coding all text, should I be making it translatable?

I wouldn't worry about this just yet. It's fairly easy to do this later, and we don't know what translations we'll need yet.

To create or update peers one of the inputs accepts a list of incoming auth tokens. Is it best to have the incoming auth tokens as a comma separated list or should there be a plus icon to add each separately? If we do a comma separated list then we should communicate that to users, or also also just spaces as separators. Trying to think what gives the best user experience here.

Comma separated list is fine. You can just provide a hint under this input. You can also convert this to an array fairly easily by removing any whitespace, and splitting the string on the ,.

When updating a peer should we display the auth tokens on the admin UI? Or are there security concerns about doing that?

If they're public tokens, then you can show them. If they're private tehn probably not. You could show the first few charaters or something so that users can at least identify the token.

Global search bar - the search bar functionality should search across peer id/name and asset id, and search over asset code on any page.

If you use a remix layout this should be fairly easy to make it global. Tailwind UI have some fairly nice examples for a good UX: https://tailwindui.com/components/application-ui/navigation/command-palettes#component-540bdf1e4a0e2ec2f667a2c7c123ff0f

Improve mobile view

Tailwind's responsive variants make this fairly trivial. You'll probably just want to do the designs first.

Create tests (is Jest the preferred framework?)

Jest is currently used elsewhere in rafiki for unit tests - so probably best to stick with that if you're writing unit tests. It's probably more effective to write integrations tests though, playwright is fantastic for this.

[cairin]

Should probably make all your components typescript files so that you can type your props.

type DisplayAssetProps = {
  // Prop types here
  test: string
}

export const DisplayAsset: FC<DisplayAssetProps> = ({
  test
}) => {
  return (
    <div>
      { test }
    </div>
  )
}

[raducristianpopa]

Updates:

• CI action that runs pnpm --filter frontend build (for now) to make sure everything it's okay
• two Rafiki Admin instances are now running in localenv (one for Cloud Nine Wallet and one for Happy Life Bank)
• updated localenv diagram to include Rafiki Admin instances

[mkurapov]

After merging in the change from main (#1248) to fix the tigerbeetle docker compose entry point, both of the admin UIs were working for me!

[mkurapov]

Final pass

[mkurapov]

Suggested change

	context: ../../..
	context: ../..

[mkurapov]

For localenv to work properly

[mkurapov]

Suggested change

	context: ../../..
	context: ../..

[mkurapov]

In the diagram, can you fix the png to have (d) Rafiki Admn -> (d) Rafiki Admin

[wilsonianb]

🎉
worked for me with the Dockerfile path changes @mkurapov mentioned

[mkurapov]

🚀