📄

Add Custom Pages to the Admin UI

Quite often you want to add a dashboard or a custom workflow to the Admin UI. This is possible (and easy!) in Graphweaver. In fact if you can also inject custom fields into the Admin UI. You can learn more about that in

.

By default, Graphweaver looks for custom pages in [your project]/admin-ui/custom-pages. If it finds an export called customPages after importing that file, then it’ll build your custom pages into the admin UI and start using them.

Example

Here’s an example of a custom page configuration from our REST example project:

import { Auth, Challenge, PasswordLogin } from '@exogee/graphweaver-auth-ui-components';

export const customPages = {
	routes: () => [
		{
			path: '/auth',
			element: <Auth />,
			children: [
				{
					path: 'login',
					element: <PasswordLogin />,
				},
				{
					path: 'challenge',
					element: <Challenge />,
				},
			],
		},
	],
};

This tells Graphweaver that:

  • There are three custom pages we want added to the router for the admin area:
    • /auth
    • /auth/login
    • /auth/challenge
  • When rendering any of these pages, render the main layout wrapping them, then render whatever React component is passed in.

Advanced Example

We have a more advanced example in our Xero example project:

import { DefaultLayout, apolloClient } from '@exogee/graphweaver-admin-ui-components';
import { gql } from '@apollo/client';

import { XeroAuthCodeReceiver } from './xero-auth-code-receiver';
import { AllCompanies, SingleCompany } from './dashboards';
import { TenantsQuery } from './index.generated';

const tenantsQuery = gql`
	query Tenants {
		tenants {
			id
			tenantName
		}
	}
`;

export const customPages = {
	routes: () => [
		{
			// This is where Xero sends us back to after the OAuth flow.
			// Its job is to read the code and store it in local storage, then
			// redirect back to /.
			path: '/xero-auth-code',
			element: <XeroAuthCodeReceiver />,
		},
		{
			path: 'xero-dashboard',
			element: <DefaultLayout />,
			children: [
				{
					index: true,
					element: <AllCompanies />,
				},
				{
					path: ':tenantId',
					element: <SingleCompany />,
				},
			],
		},
	],

	navLinks: async () => {
		// To know nav links we need to know the tenants.
		const { data } = await apolloClient.query<TenantsQuery>({ query: tenantsQuery });

		if (!Array.isArray(data.tenants)) return;

		return [
			{ name: 'All Companies', route: '/xero-dashboard' },
			...data.tenants.map((tenant) => ({
				name: tenant.tenantName,
				route: `/xero-dashboard/${tenant.id}`,
			})),
		];
	},
};

In this example we create custom navigation links as well as custom pages (at custom routes based on the Tenant IDs we get from the backend). The All Companies navigation link is always displayed.

Configuring Where Graphweaver Looks for Custom Pages

By default custom pages are located in [your project]/admin-ui/custom-pages, but if you want to change the import path you can control this with the adminUI.customPagesPath configuration option in the graphweaver-config file.

Exogee