Merge branch 'main' into aw-docs-missing-roles-warning

README.md

@@ -667,6 +667,9 @@ And there you have it.
     <td align="center"><a href="https://github.com/antonmihaylov"><img src="https://avatars.githubusercontent.com/u/57956282?v=4" width="100px;" alt=""/><br /><sub><b>Anton Mihaylov</b></sub></a></td>
     <td align="center"><a href="https://github.com/mparramont"><img src="https://avatars.githubusercontent.com/u/636075?v=4" width="100px;" alt=""/><br /><sub><b>Miguel Parramón</b></sub></a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://fabiolazzaroni.dev/"><img src="https://avatars.githubusercontent.com/u/15056746?v=4" width="100px;" alt=""/><br /><sub><b>Fabio Lazzaroni</b></sub></a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

__fixtures__/test-project/api/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "1.4.2",
-    "@redwoodjs/graphql-server": "1.4.2"
+    "@redwoodjs/api": "1.5.1",
+    "@redwoodjs/graphql-server": "1.5.1"
   }
 }

__fixtures__/test-project/package.json

@@ -8,7 +8,7 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/core": "1.4.2"
+    "@redwoodjs/core": "1.5.1"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",
@@ -25,4 +25,4 @@
   "scripts": {
     "postinstall": ""
   }
-}
+}

__fixtures__/test-project/web/package.json

@@ -13,10 +13,10 @@
     ]
   },
   "dependencies": {
-    "@redwoodjs/auth": "1.4.2",
-    "@redwoodjs/forms": "1.4.2",
-    "@redwoodjs/router": "1.4.2",
-    "@redwoodjs/web": "1.4.2",
+    "@redwoodjs/auth": "1.5.1",
+    "@redwoodjs/forms": "1.5.1",
+    "@redwoodjs/router": "1.5.1",
+    "@redwoodjs/web": "1.5.1",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"

__fixtures__/test-project/web/src/Redwood.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Redwood" />
+
+<p align="center">
+  <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="200" />
+  <h1 align="center">Redwood</h1>
+</p>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than
+250 amazing contributors (see end of file for a full list)._
+
+**Redwood is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**

docs/README.md

@@ -12,6 +12,12 @@ yarn install
 yarn start
 ```
 
+#### Making Changes
+
+Changes should be made in the `./docs` directory and not in the generated `./versioned_docs` or `./versioned_sidebars` directories directly.
+
+After running `yarn start`, you should be able to see your changes in the local [Canary Version](http://localhost:3000/docs/canary/index).
+
 #### Internal linking
 
 For links to other docs inside the `tutorials` directory you need to use *relative* links.

docs/docs/deploy/baremetal.md

@@ -26,7 +26,7 @@ yarn rw deploy baremetal production
 
 The Baremetal deploy runs several commands in sequence. These can be customized, to an extent, and some of them skipped completely:
 
-1. `git clone --depth=1` to retieve the latest code
+1. `git clone --depth=1` to retrieve the latest code
 2. Symlink the latest deploy `.env` to the shared `.env` in the app dir
 3. `yarn install` - installs dependencies
 4. Runs prisma DB migrations
@@ -287,7 +287,7 @@ This may also be a one-liner like:
 + # [ -z "$PS1" ] && return
 ```
 
-There are techniques for getting `node`, `npm` and `yarn` to be availble without loading everything in `.bashrc`. See [this comment](https://github.com/nvm-sh/nvm/issues/1290#issuecomment-427557733) for some ideas.
+There are techniques for getting `node`, `npm` and `yarn` to be available without loading everything in `.bashrc`. See [this comment](https://github.com/nvm-sh/nvm/issues/1290#issuecomment-427557733) for some ideas.
 
 :::
 

docs/docs/how-to/role-based-access-control.md

@@ -59,7 +59,7 @@ If your 🏠 could enforce RBAC, it needs to know the rules.
 | -------- | :-----: | :------: | :----: | :------: | :-----: | :-----: |
 | Neighbor |    ✅    |          |   ✅    |    ✅     |         |         |
 | Plumber  |    ✅    |    ✅     |        |    ✅     |    ✅    |         |
-| Owner    |    ✅    |    ✅     |   ✅    |    ✅     |    ✅    |         |
+| Owner    |    ✅    |    ✅     |   ✅    |    ✅     |    ✅    |    ✅    |
 
 #### RBAC Example: Blog
 

docs/docs/mocking-graphql-requests.md

@@ -83,6 +83,25 @@ mockGraphQLQuery('OperationName', (_variables, { ctx }) => {
 })
 ```
 
+## TypeScript
+You can get stricter types by passing types when mocking the query, mutation and its variables:
+
+```tsx
+import type { UserProfileQuery, UserProfileQueryVariables } from 'types/graphql'
+
+mockGraphQLQuery<UserProfileQuery, UserProfileQueryVariables>('UserProfileQuery', { /*... */ })
+```
+or, you can manually pass your own types:
+
+```tsx
+mockGraphQLQuery<{
+  userProfile: {
+    id: number,
+    name: string,
+  }
+}>('UserProfileQuery', { /*... */ })
+```
+
 ## Global mock-requests vs local mock-requests
 
 Placing your mock-requests in `"<name>.mock.js"` will cause them to be globally scoped in Storybook, making them available to all stories.

docs/docs/tutorial/chapter2/routing-params.md

@@ -337,7 +337,7 @@ export const Success = ({ article }) => {
 <TabItem value="ts" label="TypeScript">
 
 ```tsx title="web/src/components/ArticleCell/ArticleCell.tsx"
-import type { FindArticleQuery } from 'types/graphql'
+import type { ArticleQuery } from 'types/graphql'
 import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
 
 export const QUERY = gql`
@@ -362,7 +362,7 @@ export const Failure = ({ error }: CellFailureProps) => (
   <div style={{ color: 'red' }}>Error: {error.message}</div>
 )
 
-export const Success = ({ article }: CellSuccessProps<FindArticleQuery>) => {
+export const Success = ({ article }: CellSuccessProps<ArticleQuery>) => {
   return JSON.stringify(article)
 }
 ```
@@ -502,7 +502,7 @@ export const Success = ({ article, id, rand }) => {
 <TabItem value="ts" label="TypeScript">
 
 ```tsx
-interface Props extends CellSuccessProps<FindArticleQuery> {
+interface Props extends CellSuccessProps<ArticleQuery> {
   rand: number
 }
 
@@ -637,7 +637,7 @@ export default Article
 </TabItem>
 </Tabs>
 
-And update `ArticlesCell` and `ArticleCell` (note the plural and singular naming) to use this new component instead:
+And update `ArticlesCell` to use this new component instead:
 
 <Tabs groupId="js-ts">
 <TabItem value="js" label="JavaScript">
@@ -721,6 +721,78 @@ export const Success = ({ articles }: CellSuccessProps<ArticlesQuery>) => {
 </TabItem>
 </Tabs>
 
+Last but not least we can update the `ArticleCell` to properly display our blog posts as well:
+
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
+```jsx title="web/src/components/ArticleCell/ArticleCell.js"
+// highlight-next-line
+import Article from 'src/components/Article'
+
+export const QUERY = gql`
+  query ArticleQuery($id: Int!) {
+    article: post(id: $id) {
+      id
+      title
+      body
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ articles }) => (
+  // highlight-next-line
+  <Article article={article} />
+)
+```
+
+</TabItem>
+<TabItem value="ts" label="TypeScript">
+
+```jsx title="web/src/components/ArticleCell/ArticleCell.tsx"
+// highlight-next-line
+import Article from 'src/components/Article'
+
+import type { ArticleQuery } from 'types/graphql'
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+export const QUERY = gql`
+  query ArticleQuery($id: Int!) {
+    article: post(id: $id) {
+      id
+      title
+      body
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ articles }: CellSuccessProps<ArticleQuery>) => (
+  // highlight-next-line
+  <Article article={article} />
+)
+```
+
+</TabItem>
+</Tabs>
+
 And there we go! We should be able to move back and forth between the homepage and the detail page. If you've only got one blog post then the homepage and single-article page will be identical! Head to the posts admin and create a couple more, won't you?
 
 ![Article page showing an article](https://user-images.githubusercontent.com/300/146101296-f1d43812-45df-4f1e-a3da-4f6a085bfc08.png)

docs/docs/tutorial/chapter5/testing.md

@@ -12,16 +12,45 @@ Since we just started the suite, and we haven't changed any files yet, it may no
 
 ![tests_running](https://user-images.githubusercontent.com/46945607/165376937-89ed9254-0d8e-4945-a0d9-17178764a4b0.png)
 
-If you cloned the example repo during the intermission and followed along with the Storybook tutorial in this chapter, the test run should finish and you will see something like this: 
+If you cloned the example repo during the intermission and followed along with the Storybook tutorial in this chapter, the test run should finish and you will see something like this:
 
 ![suite_finished](https://user-images.githubusercontent.com/46945607/165378519-2859dd0d-d46a-448f-a62e-0b8f91c55a87.png)
 
-Note that the summary on the bottom indicates that there was 1 test that failed. If you feel curious, you can scroll up in your terminal and see more details on the test that failed. We'll also take a look at that failed test shortly. 
+:::info
+
+If you decided to keep your codebase from the first part of the tutorial, then you'll get the following error after running
+
+```bash
+yarn rw test
+
+Error: Get config: Schema Parsing P1012
+
+error: Error validating datasource `db`: the URL must start with the protocol `postgresql://` or `postgres://`.
+  -->  schema.prisma:3
+   |
+ 2 |   provider = "postgresql"
+ 3 |   url      = env("DATABASE_URL")
+   |
+
+Validation Error Count: 1
+
+error Command failed with exit code 1.
+```
+
+To clear the error and to proceed with running the test suite, head over to your `.env` file and add the following line:
+
+```bash
+TEST_DATABASE_URL=<the same url as DATABASE_URL>
+```
+
+:::
+
+Note that the summary on the bottom indicates that there was 1 test that failed. If you feel curious, you can scroll up in your terminal and see more details on the test that failed. We'll also take a look at that failed test shortly.
 
 If you continued with your own repo from chapters 1-4, you may see some other failures here or none at all: we made a lot of changes to the pages, components and cells we generated, but didn't update the tests to reflect the changes we made. (Another reason to start with the [example repo](#using-the-example-repo)!)
 
 To switch back to the default mode where test are **o**nly run for changed files, press `o` now (or quit and restart `yarn rw test`).
 
 What we want to aim for is all green in that left column and no failed tests. In fact best practices tell us you should not even commit any code to your repo unless the test suite passes locally. Not everyone adheres to this policy quite as strictly as others...*&lt;cough, cough&gt;*
 
-We've got an excellent document on [Testing](../../testing.md) which you should definitely read if you're brand new to testing, especially the [Terminology](../../testing.md#terminology) and [Redwood and Testing](../../testing.md#redwood-and-testing) sections. For now though, proceed to the next section and we'll go over our approach to getting that last failed test passing. 
+We've got an excellent document on [Testing](../../testing.md) which you should definitely read if you're brand new to testing, especially the [Terminology](../../testing.md#terminology) and [Redwood and Testing](../../testing.md#redwood-and-testing) sections. For now though, proceed to the next section and we'll go over our approach to getting that last failed test passing.

docs/package.json

@@ -24,18 +24,18 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.20",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.20",
-    "@docusaurus/preset-classic": "2.0.0-beta.20",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
     "@mdx-js/react": "1.6.22",
     "clsx": "1.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-player": "2.10.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.20",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
     "@tsconfig/docusaurus": "1.0.5",
-    "typescript": "4.6.4"
+    "typescript": "4.7.2"
   }
 }