Merge remote-tracking branch 'upstream/master' into authentication

.github/ISSUE_TEMPLATE/3.rfc.yml

@@ -13,18 +13,15 @@ body:
     attributes:
       label: What's the problem? 🤔
       description: Write a short paragraph or bulleted list to briefly explain what you're trying to do, what outcomes you're aiming for, and any other relevant details to help us understand the motivation behind this RFC.
-
   - type: textarea
     attributes:
       label: What are the requirements? ❓
       description: Provide a list of requirements that should be met by the accepted proposal.
-
   - type: textarea
     attributes:
       label: What are our options? 💡
       description: |
         Have you considered alternative options for achieving your desired outcome? It's not necessary to go into too much detail here, but it can help strengthen your main proposal.
-
   - type: textarea
     attributes:
       label: Proposed solution 🟢
@@ -35,7 +32,6 @@ body:
         - using diagrams to help illustrate your ideas
         - including code examples if you're proposing an interface or system contract
         - linking to relevant project briefs or wireframes
-
   - type: textarea
     attributes:
       label: Resources and benchmarks 🔗

.github/ISSUE_TEMPLATE/4.docs-feedback.yml

@@ -0,0 +1,48 @@
+name: Docs feedback
+description: Improve documentation about MUI Toolpad.
+labels: ['status: waiting for maintainer', 'support: docs-feedback']
+title: '[docs] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please provide a searchable summary of the issue in the title above ⬆️.
+
+        Thanks for contributing by creating an issue! ❤️
+  - type: input
+    attributes:
+      label: Search keywords
+      description: Your issue may have already been reported! List the keywords you've used to search the [existing issues](https://github.com/mui/mui-toolpad/issues). This will also make your issue searchable for others.
+      placeholder: e.g. datagrid column resizing
+    validations:
+      required: true
+  - type: input
+    id: page-url
+    attributes:
+      label: Related page
+      description: Which page of the documentation is this about?
+      placeholder: https://mui.com/toolpad/
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Kind of issue
+      description: What kind of problem are you facing?
+      options:
+        - Unclear explanations
+        - Missing information
+        - Broken demo
+        - Other
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Issue description
+      description: |
+        Let us know what went wrong when you were using this documentation and what we could do to improve it.
+      value: |
+        I was looking for ... and it appears that ...
+  - type: textarea
+    attributes:
+      label: Context 🔦
+      description: What are you trying to accomplish? What brought you to this page? Your context can help us to come up with solutions that benefit the community as a whole.

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c0d1daa7f7e14667747d73a7dbbe8c074bc8bfe2 # v2.22.9
+        uses: github/codeql-action/init@b374143c1149a9115d881581d29b8390bbcbb59c # v3.22.11
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c0d1daa7f7e14667747d73a7dbbe8c074bc8bfe2 # v2.22.9
+        uses: github/codeql-action/analyze@b374143c1149a9115d881581d29b8390bbcbb59c # v3.22.11

.github/workflows/scorecards.yml

@@ -44,6 +44,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@c0d1daa7f7e14667747d73a7dbbe8c074bc8bfe2 # v2.22.9
+        uses: github/codeql-action/upload-sarif@b374143c1149a9115d881581d29b8390bbcbb59c # v3.22.11
         with:
           sarif_file: results.sarif

.github/workflows/update-monorepo.yml

@@ -12,7 +12,7 @@ jobs:
       issues: write
     steps:
       - name: Set up Node.js ⚙️
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
+        uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8 # v4
         with:
           node-version: '18.x'
 

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 0.1.42
+
+<!-- generated comparing v0.1.41..master -->
+
+_Dec 22, 2023_
+
+A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+This week: a big overhaul to our query editor! Improved titles for pages in the sidebar. Support server-side row updates for the data grid.
+
+- &#8203;<!-- 15 -->Remove components from appDom (#3017) @Janpot
+- &#8203;<!-- 14 -->Introduce pagesManifest (#3016) @Janpot
+- &#8203;<!-- 13 -->Add labels to form validation properties (#3015) @Janpot
+- &#8203;<!-- 12 -->Guess proper default page titles based on page name (#3014) @Janpot
+- &#8203;<!-- 11 -->Remove functions worker (#3013) @Janpot
+- &#8203;<!-- 10 -->Add a new query panel (#2393) @bharatkashyap
+- &#8203;<!-- 09 -->Support updating rows in the data provider (#3001) @Janpot
+- &#8203;<!-- 08 -->Improve styling of the application navigation (#2993) @Janpot
+- &#8203;<!-- 07 -->Bring in some fixes from pnpm migration branch (#3010) @Janpot
+- &#8203;<!-- 06 -->Update yarn.lock (#3008) @apedroferreira
+- &#8203;<!-- 05 -->Update monorepo (#2998) @apedroferreira
+- &#8203;<!-- 04 -->fix 2527, customize page name (#2850) @JerryWu1234
+- &#8203;<!-- 03 -->Fix changelog (#2995) @apedroferreira
+- &#8203;<!-- 02 -->[docs] Update documentation for query panel (#3000) @bharatkashyap
+- &#8203;<!-- 01 -->[docs] Fix 301 links @oliviertassinari
+
+All contributors of this release in alphabetical order: @apedroferreira, @bharatkashyap, @Janpot, @JerryWu1234, @oliviertassinari
+
 ## 0.1.41
 
 <!-- generated comparing v0.1.40..master -->

README.md

@@ -51,7 +51,7 @@ pnpm create toolpad-app my-toolpad-app
 
 ## Documentation
 
-Check out our [documentation](https://mui.com/toolpad/getting-started/overview/).
+Check out our [documentation](https://mui.com/toolpad/getting-started/).
 
 ## Examples
 

docs/README.md

@@ -12,7 +12,7 @@ If you do not have yarn installed, select your OS and follow the instructions on
 
 _DO NOT USE NPM, use Yarn to install the dependencies._
 
-Visit the [MUI Toolpad documentation](https://mui.com/toolpad/getting-started/overview/).
+Visit the [MUI Toolpad documentation](https://mui.com/toolpad/getting-started/).
 
 ## How can I add a new demo to the documentation?
 

docs/data/pages.ts

@@ -3,9 +3,9 @@ import componentsManifest from './toolpad/reference/components/manifest.json';
 
 const pages: MuiPage[] = [
   {
-    pathname: '/toolpad/getting-started',
+    pathname: '/toolpad/getting-started-group',
     children: [
-      { pathname: '/toolpad/getting-started/overview' },
+      { pathname: '/toolpad/getting-started', title: 'Overview' },
       { pathname: '/toolpad/getting-started/installation' },
       { pathname: '/toolpad/getting-started/why-toolpad', title: 'Why Toolpad?' },
       { pathname: '/toolpad/getting-started/first-app', title: 'Build your first app' },

docs/data/toolpad/concepts/custom-functions.md

@@ -5,7 +5,7 @@
 The most powerful way of bringing data into Toolpad is through your own code. You can define functions inside `toolpad/resources` and use them when creating a query of this type. The following video shows how you can use this feature to read data from PostgreSQL.
 
 <video controls width="auto" height="100%" style="contain" alt="custom-function">
-  <source src="/static/toolpad/docs/concepts/connecting-to-data/pg-function.mp4" type="video/mp4">
+  <source src="/static/toolpad/docs/concepts/connecting-to-data/postgres.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
 
@@ -36,7 +36,7 @@ You get the following response:
 </li>
 </ul>
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-8.png", "alt": "Server-side values", "caption": "Using server-side values in custom functions", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-8.png", "alt": "Server-side values", "caption": "Using server-side values in custom functions", "indent": 1, "aspectRatio": 6 }}
 
 <ul>
 
@@ -67,7 +67,7 @@ export async function getAnimals(
 }
 ```
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/custom-function-params.png", "alt": "Controls for custom function parameters", "caption": "Controls for custom function parameters", "indent": 1, "zoom": false, "width": 639}}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-9.png", "alt": "Controls for custom function parameters", "caption": "Controls for custom function parameters", "indent": 1,  "aspectRatio": 6}}
 
 :::info
 Toolpad also provides a `createFunction` API to be able to define your parameters when creating custom functions:

docs/data/toolpad/concepts/data-providers.md

@@ -138,13 +138,32 @@ Uncheck the column option "sortable" if you want to disable sorting for a certai
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/data-providers/disable-sortable.png", "alt": "Disable sortable", "caption": "Disable sortable", "zoom": false, "width": 325 }}
 
-## Row editing 🚧
+## Row editing
 
-:::warning
-This feature isn't implemented yet.
+The data provider can be extended to automatically support row editing. To enable this, you'll have to add a `updateRecord` method to the data provider interface that accepts the `id` of the row that is to be deleted, and an object containing all the updated fields from the row editing operation.
 
-👍 Upvote [issue #2887](https://github.com/mui/mui-toolpad/issues/2887) if you want to see it land faster.
-:::
+```tsx
+export default createDataProvider({
+  async getRecords() {
+    return prisma.users.findMany();
+  },
+
+  async updateRecord(id, data) {
+    return prisma.users.update({ where: { id }, data });
+  },
+});
+```
+
+When this method is available in the data provider, each row will have an edit button. This edit button brings the row in edit mode. To commit the changes press the save button on the row that is in edit mode. To discard the changes use the cancel button.
+
+<video controls width="auto" height="100%" style="contain" alt="component-library">
+  <source src="/static/toolpad/docs/concepts/data-providers/editing.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+You can disable the editing functionality for specific columns by unchecking the **Editable** option in the column definition.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/data-providers/disable-editable.png", "alt": "Disable editable", "caption": "Disable editable", "zoom": false, "width": 308 }}
 
 ## Row creation 🚧
 

docs/data/toolpad/concepts/http-requests.md

@@ -2,7 +2,7 @@
 
 <p class="description">These offer a fast way to load external data from REST APIs, via a configurable interface.</p>
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-1.png", "alt": "Add HTTP request", "caption": "Adding a query via the HTTP Request editor" }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-1.png", "alt": "Add HTTP request", "caption": "Adding a query via the HTTP Request panel" }}
 
 ## HTTP Request editor
 
@@ -13,7 +13,7 @@ The following options are configurable here:
   You can add query parameters to your request here. These get appended to the request URL, like
   `https://dog.ceo/api/breed/akita/images/random?param1=value1`
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-2.png", "alt": "Add query params", "caption": "Adding a query parameter", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-2.png", "alt": "Add query params", "caption": "Adding a query parameter", "indent": 1, "aspectRatio": 6 }}
 
 - ### Body
 
@@ -25,13 +25,13 @@ The following options are configurable here:
 
   > `GET` requests do not have a request body
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-3.png", "alt": "Add request body", "caption": "Adding a request body", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-3.png", "alt": "Add request body", "caption": "Adding a request body", "indent": 1, "aspectRatio": 6 }}
 
 - ### Request headers
 
   You can define extra headers to be sent along with the request in this tab.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/http-query-headers.png", "alt": "Add request header", "caption": "Adding a request header", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-4.png", "alt": "Add request header", "caption": "Adding a request header", "indent": 1, "aspectRatio": 6 }}
 
 - ### Response
 
@@ -43,23 +43,23 @@ The following options are configurable here:
 
   - `raw`: Do not parse the response and return the response as text.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-5.png", "alt": "Add response parse format", "caption": "Adding a response parse format", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-5.png", "alt": "Add response parse format", "caption": "Adding a response parse format", "indent": 1, "aspectRatio": 6 }}
 
 - ### Transform
 
   You can transform the response via a JavaScript expression in this tab. This expression must return a `data` variable.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-6.png", "alt": "Add transformation", "caption": "Transforming the response via JavaScript", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/query-6.png", "alt": "Add transformation", "caption": "Transforming the response via JavaScript", "indent": 1, "aspectRatio": 6 }}
 
 ## Parameters
 
 To be really useful, you need to connect these queries with data present on your page. You can do so by creating **parameters.**
 
 You can define these in the interface available in the HTTP Request query editor. You can bind a parameter to any value available on the page, and the parameter can be bound to any value in the query.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/example-parameter.png", "alt": "HTTP Request parameter", "caption": "Creating a parameter and binding it", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/example-parameter.png", "alt": "HTTP Request parameter", "caption": "Creating a parameter and binding it", "indent": 1, "aspectRatio": 6 }}
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/url-bound-parameter.png", "alt": "Server-side values", "caption": "Using the parameter in the query URL", "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/connecting-to-data/bound-parameter.png", "alt": "Server-side values", "caption": "Using the parameter in the query URL", "indent": 1, "aspectRatio": 6 }}
 
 ### Secrets
 

docs/data/toolpad/concepts/page-properties.md

@@ -10,11 +10,13 @@
 
 The possible options for the the display mode are:
 
-- **App shell**: Pages with their display mode set to this value will render within the navigation sidebar on the left, allowing for easy navigation between all pages:
+- **App shell**: Pages with their display mode set to this value will render within the navigation sidebar on the left, allowing for easy navigation between all pages.
+
+To display a different name for a page in the sidebar, the page **display name** can be set.
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/page-properties/app-shell.png", "alt": "App shell display mode ", "caption": "Page with display mode set to App shell", "indent": 1 }}
 
-- **No shell**: Pages with their display mode set to this value will render without the navigation sidebar
+- **No shell**: Pages with their display mode set to this value will render without the navigation sidebar.
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/page-properties/no-shell.png", "alt": "No shell display mode ", "caption": "Page with display mode set to No shell", "indent": 1}}