Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[blog] Add post about how MUI uses Toolpad #40172

Merged
merged 41 commits into from
Mar 4, 2024
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
2acd779
add
prakhargupta1 Dec 11, 2023
94dbc18
add
prakhargupta1 Jan 4, 2024
336b18f
lint
prakhargupta1 Jan 4, 2024
92cd7aa
edits
prakhargupta1 Jan 4, 2024
d1468e1
add-videos
prakhargupta1 Jan 5, 2024
9696044
add video
prakhargupta1 Jan 9, 2024
fb99668
space
prakhargupta1 Jan 9, 2024
b7c4300
Update docs/pages/blog/2023-toolpad-usage-in-mui.md
prakhargupta1 Jan 10, 2024
1b3f714
add soft line break
prakhargupta1 Jan 18, 2024
245aaca
Merge branch 'blog-how-mui-uses-toolpad' of /~https://github.com/prakha…
prakhargupta1 Jan 18, 2024
e8ba930
typo
prakhargupta1 Jan 18, 2024
bf96c2a
Apply suggestions from Sam's review
prakhargupta1 Feb 21, 2024
1c3f7b6
more edits
prakhargupta1 Feb 21, 2024
bf6e79e
replace What's next with Conclusion
prakhargupta1 Feb 23, 2024
6034222
add
prakhargupta1 Dec 11, 2023
b6fb13b
add
prakhargupta1 Jan 4, 2024
6de6b76
lint
prakhargupta1 Jan 4, 2024
5265d61
edits
prakhargupta1 Jan 4, 2024
13ceef2
add-videos
prakhargupta1 Jan 5, 2024
003715e
add video
prakhargupta1 Jan 9, 2024
e7324cd
space
prakhargupta1 Jan 9, 2024
2deec73
add soft line break
prakhargupta1 Jan 18, 2024
479cc16
Update docs/pages/blog/2023-toolpad-usage-in-mui.md
prakhargupta1 Jan 10, 2024
d51ef51
typo
prakhargupta1 Jan 18, 2024
be884c1
Apply suggestions from Sam's review
prakhargupta1 Feb 21, 2024
ac033b5
more edits
prakhargupta1 Feb 21, 2024
0d1e329
replace What's next with Conclusion
prakhargupta1 Feb 23, 2024
3fd34bf
polish
oliviertassinari Feb 23, 2024
d4bc1c6
Fix build
oliviertassinari Feb 23, 2024
610f4f7
Sam's review
oliviertassinari Feb 23, 2024
9035ba9
more sam's review
oliviertassinari Feb 23, 2024
b4a4fef
more polish
oliviertassinari Feb 23, 2024
61dac54
more polish
oliviertassinari Feb 23, 2024
bd4faa2
prettier
oliviertassinari Feb 26, 2024
5b33c8b
Merge branch 'blog-how-mui-uses-toolpad' of /~https://github.com/prakha…
prakhargupta1 Feb 26, 2024
41178e4
update the OG image card
danilo-leal Feb 27, 2024
25522ee
Merge branch 'blog-how-mui-uses-toolpad' of /~https://github.com/prakha…
prakhargupta1 Feb 28, 2024
5f81c0c
change date to coming Monday
prakhargupta1 Feb 28, 2024
c7669c8
Merge branch 'heads/upstream/master' into pr/40172
Janpot Mar 4, 2024
01bbaf6
Update toolpad-use-cases.js
Janpot Mar 4, 2024
1460deb
Bharat's suggestions
prakhargupta1 Mar 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/pages/blog/toolpad-use-cases.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
import { docs } from './toolpad-use-cases.md?@mui/markdown';

export default function Page() {
return <TopLayoutBlog docs={docs} />;
}
110 changes: 110 additions & 0 deletions docs/pages/blog/toolpad-use-cases.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
---
title: How does MUI use Toolpad?
description: Explore how we use Toolpad for production use cases at MUI.
date: 2024-02-26T00:00:00.000Z
authors: ['prakhargupta']
card: true
tags: ['Product', 'News']
---

Toolpad helps full-stack engineers build internal tools quickly.
Internal tools encompass data-intensive CRUD interfaces, analytics dashboards, or custom apps that make teams productive.
Toolpad offers a low-code, GUI-based, code-friendly way of building apps and comes as an npm package that can be imported in an existing codebase.

We've been dogfooding Toolpad at MUI to build our internal tools, and it has proven beneficial for us to easily assemble well-organized, centrally located KPI dashboards and operations apps.
In this blog post we'll discuss four such apps, and explain how we used Toolpad to turn our ideas into reality.

<a href="https://tools-public.mui.com/prod/pages/OverviewPage">
<img alt="MUI public app for tracking KPIs" src="/static/blog/toolpad-use-cases/tools-public.png" loading="lazy" width="2400" height="1394" />
</a>

## Problems tackled through Toolpad

Our internal tooling is easier to use and less prone to errors now; before we built these apps, some of these necessary functions were no more than a set of instructions in a Google doc or on Notion.
A user had to log into multiple services to manage their day-to-day chores. Now, one interface does it all.
We utilized Pipedream, Metabase, Google Sheets, and other tools to streamline our day-to-day operations.
This meant we had distributed code in multiple places, accessible to only a few.
Now we have everything on GitHub and collaboration is much simpler.

Let's delve into four scenarios that Toolpad has successfully addressed:

## 1. Support key validator

We offer a priority support service to our MUI X premium customers: their queries get an expedited response within 24 hours.
They share their issue through a Priority Support template in our repo where they're directed to validate their license key, and once it's validated, the 24-hour countdown starts.

<a href="https://tools-public.mui.com/prod/pages/validateSupport">
<img alt="Premium key validator support app" src="/static/blog/toolpad-use-cases/validate-support.png" loading="lazy" width="2400" height="1394" />
</a>

Here's how we built an app for this:

The [`updateMuiPaidSupport.ts`](/~https://github.com/mui/mui-public/blob/master/tools-public/toolpad/resources/updateMuiPaidSupport.ts) file hosts all functions that are called from Toolpad.
It uses the [custom function](https://mui.com/toolpad/concepts/custom-functions/) feature and combines GitHub actions, Google Sheets, and Octokit to read and verify user information.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
The fetched data is then bound to the UI components.
It uses [page parameters](https://mui.com/toolpad/concepts/page-properties/#page-parameters), [secrets handling](https://mui.com/toolpad/concepts/custom-functions/#secrets-handling), [shell removal](https://mui.com/toolpad/concepts/page-properties/#display-mode), and custom styling as additional features of Toolpad.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
This app took one developer just a few hours to build which otherwise would have taken a couple of days.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved

## 2. Customer support KPI tracker

The read-only page illustrated below uses [HTTP requests](https://mui.com/toolpad/concepts/http-requests/) for its data source.
Through the query builder UI we fetch the 100 latest support tickets from Zendesk to calculate the average time it takes us to respond to and resolve customer requests.
It uses a [custom component](https://mui.com/toolpad/concepts/custom-components/) which we call the "health badge."
Based on the metric value, the component shows three color-coded states: Problem (red), Warning (yellow), and OK (green).
Other KPI pages also use this health badge and pre-built Chart components to compare stats, observe trends, and spot anomalies.

The video below demonstrates the usage of this app in dev mode:

<video controls width="100%" height="auto" style="contain" alt="zendesk first reply in devmode">
<source src="/static/blog/toolpad-use-cases/zendesk-first-reply-dev.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

We opted for Toolpad since Metabase doesn't support importing data from REST APIs.
This is possible in Google Sheets but it requires writing a lot of JS code, and since we wanted to embed it in a [Notion page](https://www.notion.so/mui-org/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c#3974cb6ed12b4c5a9013bac63113e3bc), Toolpad was the ideal choice.
Toolpad handles state management and routing, and simplifies query building and data binding, removing the need to write glue code.

You can explore both of the aforementioned apps in dev mode on your device by running the underlying [node app](/~https://github.com/mui/mui-public/tree/master/tools-public).
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
The next two apps discussed are internal to MUI.

## 3. Manage overdue invoices

We have an internal operations process to remind customers about overdue invoices: reminder emails are sent out at regular intervals following the due date.
In the Toolpad app, the operations team can view a table of all customers who need to be contacted.
They select one, email them from Zendesk, and update the status to `CONTACTED`, which is then written back to the database.
This is a private app for internal use that can't be shared, but the following video gives a quick demo:

<video controls width="100%" height="auto" style="contain" alt="overdue invoice page">
<source src="/static/blog/toolpad-use-cases/overdue-invoice.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Before this, we relied on a combination of Metabase and Google Sheets to fetch and edit records—but this was cumbersome to operate and sometimes caused data inconsistency issues.
Thanks to Toolpad we've managed to bring it all under one roof, dramatically improving our operations team's efficiency and productivity.

## 4. Contributor payout

We have a script to fetch monthly payout data for contributors to the MUI Store.
Our operations team is responsible for paying contributors, but the script proved too technically challenging for them to run without help from our engineers.
We solved this problem by importing the script into Toolpad and creating a UI for it.
The video below shows how a user can select the dates, run the script, and receive text that's properly formatted to copy and paste directly into Slack communications:

<video controls width="100%" height="auto" style="contain" alt="contributor payout page">
<source src="/static/blog/toolpad-use-cases/contributor-payout.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

With the release of [authentication](https://mui.com/toolpad/concepts/authentication/), we will now enable Google login for the above apps.
prakhargupta1 marked this conversation as resolved.
Show resolved Hide resolved

## Conclusion

As we saw, at MUI we have streamlined our internal tooling through Toolpad, as a result it helps us stay lean and move fast.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
Internal apps are so custom that it's hard to bucket them in categories though I hope that some of our use cases could resonate with you. Furthermore;
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved

- Have you come across any such ops, admin, analytics related use case in your org?
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
- Do you have exisitng code that you wish you could reuse in a low-code builder instead of starting fresh?
- Is managing frontend for internal tools a chore that you wish was solved?
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved

Toolpad handles state management, data fetching, routing, UI creation and can be imported in a codebase which can help you save a lot of time.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
I encourage you to check out more [examples](https://mui.com/toolpad/examples/) and visit our [GitHub repo](/~https://github.com/mui/mui-toolpad/) to evaluate the product.
In case you need any further information, feel free to reach out to the team at toolpad@mui.com.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading