diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index 3c3678f9810ea4..7ade883964584f 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -43,6 +43,7 @@ const ALLOWED_TAGS = [ 'Joy UI', 'MUI X', 'MUI System', + 'Toolpad', ]; export const getAllBlogPosts = () => { diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.md b/docs/pages/blog/2023-toolpad-beta-announcement.md index cb0522038237f4..318dfe94bfe1e9 100644 --- a/docs/pages/blog/2023-toolpad-beta-announcement.md +++ b/docs/pages/blog/2023-toolpad-beta-announcement.md @@ -4,18 +4,18 @@ description: Assemble admin panels and internal tools faster than ever before wi date: 2023-07-24T00:00:00.000Z authors: ['prakhargupta'] card: true -tags: ['Product'] +tags: ['Product', 'Toolpad'] --- -It's been over a year since we released the first version of Toolpad. Today, we're excited to take the next step on that journey with the release of Toolpad Beta. If you aren't familiar with Toolpad yet, it's an admin panel builder catering to the internal tooling needs of an organization, designed for developers who want to build a functional application quickly. It harnesses the speed of a UI builder for the front-end and closely integrates into your back-end. If this excites you, then read on! +It's been over a year since we released the first version of Toolpad. Today, we're excited to take the next step on that journey with the release of Toolpad Beta. If you aren't familiar with Toolpad yet, it's an admin panel builder catering to the internal tooling needs of an organization, designed for developers who want to build a functional application quickly. It harnesses the speed of a UI builder for the front end and closely integrates into your back end. If this excites you, then read on! -Introducing Toolpad +Introducing Toolpad ## Why did we decide to build Toolpad? -Toolpad was created to meet the needs of the Material UI community. As a result of surveys we conducted, and market research we undertook, we decided to develop an internal tool builder because the idea resonates with MUI's mission of empowering developers to build apps faster and more efficiently. +Toolpad was created to meet the needs of the Material UI community. As a result of the surveys we conducted, and the market research we undertook, we decided to develop an internal tool builder because the idea resonates with MUI's mission of empowering developers to build apps faster and more efficiently. Internal tools are software applications that are developed and used within an organization itself. They can automate tasks, manage data, and help foster collaboration. Internal tools are a valuable asset for businesses of all sizes, as they help to improve efficiency, productivity, and communication. @@ -28,16 +28,16 @@ Toolpad is an open-source, low-code, drag-and-drop admin builder. The primary pu Toolpad is not ideal for building static web pages, mobile apps, or customer-facing custom-designed front-ends. It's for building admin applications, CRUD interfaces, custom internal tools, and analytics dashboards. -Building an application on Toolpad + Building an application on Toolpad ## Who is Toolpad for? Before the arrival of Toolpad, the MUI organization primarily catered to the front-end needs of the development process. Our products were mostly useful for React engineers or designers, but we saw many full-stack engineers use our advanced components for data-intensive apps. These highly customizable components are well-suited for complex apps, but not all apps require the same level of customization: for example, internal tools just need basic theming. -Toolpad personas +Toolpad personas -Toolpad is for you if you're a full-stack or back-end developers who builds, manages, and integrate data pipelines, server-side logic, databases, microservices, and APIs—and knows the most about them. Sharing these endpoints with and maintaining the internal documentation for the front-end teams is a hassle that lasts forever. Toolpad empowers you to take the next step and build the UI you need using our drag-and-drop editor, without losing any part of your normal development workflow. +Toolpad is for you if you're a full-stack or back-end developer who builds, manages, and integrates data pipelines, server-side logic, databases, microservices, and APIs—and knows the most about them. Sharing these endpoints with and maintaining the internal documentation for the front-end teams is a hassle that lasts forever. Toolpad empowers you to take the next step and build the UI you need using our drag-and-drop editor, without losing any part of your normal development workflow. ## What are the main features available today? @@ -46,15 +46,15 @@ Toolpad is for you if you're a full-stack or back-end developers who builds, man Easily create user interfaces by dragging and dropping pre-built components onto the canvas. Utilize constraints to speed up the building process. -Dragging components to the canvas + Dragging components to the canvas ### 2. Query builder UI -A Postman-like query builder allows you to integrate any REST API quickly. A binding editor, which supports JavaScript, allows you to wire query response directly to the components. +A Postman-like query builder allows you to integrate any REST API quickly. A binding editor, which supports JavaScript, allows you to wire query responses directly to the components. -Building an application on Toolpad + Building an application on Toolpad ### 3. Bring your own components @@ -70,7 +70,7 @@ Directly integrate with your Node.js back-end and have your data available on th Toolpad runs completely locally. You're not stuck with an online code editor or a suboptimal GitHub integration. All configuration is stored in local files which you can version-control, edit, and deploy in any way you want. -Building an application on Toolpad + Building an application on Toolpad ### 6. A catalog of components powered by Material UI @@ -78,33 +78,38 @@ Toolpad runs completely locally. You're not stuck with an online code editor or Material UI provides production-ready React components; a chosen few are currently available inside Toolpad, and we're adding more all the time. -Building an application on Toolpad + Building an application on Toolpad ## How is Toolpad different from similar products on the market? In this domain, there are two categories of products: -1. **Visual first**: Retool, Appsmith, Budibase and the likes. While these are great tools, they don't integrate with the developer's local IDE nor offer a good git version control mechanism. Providing features that could have been hand-coded on a need basis makes the application heavy, and reports of slowness at runtime are common. +1. **Visual first**: Retool, Appsmith, Budibase and the like. While these are great tools, they don't integrate with the developer's local IDE nor offer a good git version control mechanism. Providing features that could have been hand-coded on a need basis makes the application heavy, and reports of slowness at runtime are common. -2. **Code first**: Airplane.dev, Interval and others. They also allow building internal tools but don't support a drag-and-drop UI builder. The components must be coded using their APIs, which comes with some learning curve. +2. **Code first**: Airplane.dev, Interval and others. They also allow building internal tools but don't support a drag-and-drop UI builder. + The components must be coded using their APIs, which comes with some learning curve. -Toolpad is solely focused on professional developers. As much as we are low-code, we are equally code-friendly. Providing the basic functionality that you expect from an open-source tool is non-negotiable for us—we will always prioritize your best interests over all else. With nearly a decade of experience building developer tools, we understand the long-term benefits of cultivating a close relationship with our community of users. +Toolpad is solely focused on professional developers. As much as we are low-code, we are equally code-friendly. Providing the basic functionality that you expect from an open-source tool is non-negotiable for us—we will always prioritize your best interests over all else. +With nearly a decade of experience building developer tools, we understand the long-term benefits of cultivating a close relationship with our community of users. Lastly, Toolpad is the only product that offers a drag-and-drop UI builder closely integrated with your favorite IDE, such as VSCode. It's the best of both worlds! ## How can I use Toolpad? -Toolpad is available as an npm package. Follow the [Installation guide](https://mui.com/toolpad/getting-started/installation/) in the docs to get started. You can learn more about Toolpad by visiting the [home page](https://mui.com/toolpad/). +Toolpad is available as an npm package. Follow the [Installation guide](https://mui.com/toolpad/getting-started/installation/) in the docs to get started. +You can learn more about Toolpad by visiting the [home page](https://mui.com/toolpad/). -Toolpad documentation and instructions on how to use it +Toolpad documentation and instructions on how to use it ## What's next? -We plan to continue to iterate on our vision of helping you as a developer to increase the speed and efficiency of your workflow. We want to optimize for the biggest pains that you face when building admin apps. Your input is crucial to helping us shape the roadmap from here. +We plan to continue to iterate on our vision of helping you as a developer to increase the speed and efficiency of your workflow. We want to optimize for the biggest pains that you face when building admin apps. +Your input is crucial to helping us shape the roadmap from here. The best places to stay up-to-date about what we're currently working on are [GitHub issues](/~https://github.com/mui/mui-toolpad) and our [public roadmap](/~https://github.com/orgs/mui/projects/9/views/1). -If you have any questions or would like to share feedback, you can directly contact the team at toolpad@mui.com or reach us on [X](https://twitter.com/MUI_Toolpad). You can also engage in conversation in our [Discord](https://mui.com/r/discord/) server. +If you have any questions or would like to share feedback, you can directly contact the team at toolpad@mui.com or reach us on [X/Twitter](https://twitter.com/MUI_Toolpad). +You can also engage in conversation on our [Discord](https://mui.com/r/discord/) server. If you'd like an in-depth demo to discuss your use case, please feel free to [schedule a meeting with me on Calendly](https://calendly.com/prakhar-mui). diff --git a/docs/pages/blog/toolpad-use-cases.js b/docs/pages/blog/toolpad-use-cases.js new file mode 100644 index 00000000000000..3aeea7aec33f3d --- /dev/null +++ b/docs/pages/blog/toolpad-use-cases.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './toolpad-use-cases.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/toolpad-use-cases.md b/docs/pages/blog/toolpad-use-cases.md new file mode 100644 index 00000000000000..3c6d2a307fe899 --- /dev/null +++ b/docs/pages/blog/toolpad-use-cases.md @@ -0,0 +1,108 @@ +--- +title: How does MUI use Toolpad? +description: Explore how we use Toolpad for production use cases at MUI. +date: 2024-03-04T00:00:00.000Z +authors: ['prakhargupta'] +card: true +tags: ['Product', 'Toolpad'] +--- + +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 into an existing codebase. + +We've been dogfooding [Toolpad](https://mui.com/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. + + +MUI public app for tracking KPIs + + +## 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 repository where they're directed to validate their license key, and once it's validated, the 24-hour countdown starts. + + + Premium key validator support app + + +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. +The fetched data is then bound to the UI components. +It uses Toolpad's [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 features. +This app took one developer just a few hours to build which otherwise would have taken much longer. + +## 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: + + + +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://mui-org.notion.site/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c?pvs=4#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 application](/~https://github.com/mui/mui-public/tree/HEAD/tools-public). +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: + + + +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: + + + +## Conclusion + +As you've seen, at MUI we have streamlined our internal tooling through Toolpad, helping us stay lean and move fast. +Internal apps are often very specific to the needs of the organization, but hopefully, you've been inspired by some of our use cases here: + +- Have you come across any similar needs within your org regarding operations, administration, or analytics? +- Do you have existing code that you wish you could reuse in a low-code builder instead of starting fresh? +- Do you wish you didn't have to do any maintenance on the front ends of your internal tools? + +Toolpad handles state management, data fetching, routing, and UI creation, and it can be imported directly into your code base to save you time. +I encourage you to check out more [examples](https://mui.com/toolpad/examples/) and visit our [GitHub repository](/~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. diff --git a/docs/public/static/blog/toolpad-use-cases/card.png b/docs/public/static/blog/toolpad-use-cases/card.png new file mode 100644 index 00000000000000..4c301019c3be65 Binary files /dev/null and b/docs/public/static/blog/toolpad-use-cases/card.png differ diff --git a/docs/public/static/blog/toolpad-use-cases/contributor-payout.mp4 b/docs/public/static/blog/toolpad-use-cases/contributor-payout.mp4 new file mode 100644 index 00000000000000..01431e0b72ed56 Binary files /dev/null and b/docs/public/static/blog/toolpad-use-cases/contributor-payout.mp4 differ diff --git a/docs/public/static/blog/toolpad-use-cases/overdue-invoice.mp4 b/docs/public/static/blog/toolpad-use-cases/overdue-invoice.mp4 new file mode 100644 index 00000000000000..0fdfa8fc181b4d Binary files /dev/null and b/docs/public/static/blog/toolpad-use-cases/overdue-invoice.mp4 differ diff --git a/docs/public/static/blog/toolpad-use-cases/tools-public.png b/docs/public/static/blog/toolpad-use-cases/tools-public.png new file mode 100644 index 00000000000000..f5038980713029 Binary files /dev/null and b/docs/public/static/blog/toolpad-use-cases/tools-public.png differ diff --git a/docs/public/static/blog/toolpad-use-cases/validate-support.png b/docs/public/static/blog/toolpad-use-cases/validate-support.png new file mode 100644 index 00000000000000..b988168f45bed3 Binary files /dev/null and b/docs/public/static/blog/toolpad-use-cases/validate-support.png differ diff --git a/docs/public/static/blog/toolpad-use-cases/zendesk-first-reply-dev.mp4 b/docs/public/static/blog/toolpad-use-cases/zendesk-first-reply-dev.mp4 new file mode 100644 index 00000000000000..711eb1b312afd6 Binary files /dev/null and b/docs/public/static/blog/toolpad-use-cases/zendesk-first-reply-dev.mp4 differ