diff --git a/content/200-orm/400-tools/06-prisma-studio.mdx b/content/200-orm/400-tools/06-prisma-studio.mdx index ff33c9fe25..2546683c7a 100644 --- a/content/200-orm/400-tools/06-prisma-studio.mdx +++ b/content/200-orm/400-tools/06-prisma-studio.mdx @@ -4,6 +4,14 @@ metaTitle: 'Prisma Studio' metaDescription: 'Prisma Studio is a visual database editor.' --- +import StudioStringSvg from './images/prisma-studio/string.svg'; +import StudioNumberSvg from './images/prisma-studio/number.svg'; +import StudioDatetimeSvg from './images/prisma-studio/datetime.svg'; +import StudioBooleanSvg from './images/prisma-studio/boolean.svg'; +import StudioEnumSvg from './images/prisma-studio/enum.svg'; +import StudioArraySvg from './images/prisma-studio/array.svg'; +import StudioObjectSvg from './images/prisma-studio/object.svg'; + Prisma Studio is a visual editor for the data in your database. Note that Prisma Studio is not open source but you can still create issues in the [`prisma/studio`](https://github.com/prisma/studio) repo. @@ -28,7 +36,7 @@ For more information, see [Defining models](/orm/prisma-schema/data-model/models You can select a model and its data opens in a new tab. Prisma Studio - Models view @@ -39,7 +47,7 @@ To open another model, click the **+** button. To close a model, click the the **x** button in the model tab. Prisma Studio - Open and close models @@ -50,15 +58,15 @@ The data type for each field is indicated with an icon in the header. The table below lists all data types and their identifying icon. -| Field data type | Description | -| :-------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------- | -| String type | Text | -| Number type | Integer | -| Datetime type | Date-time

| -| Boolean type | Boolean
| -| Enum type | Pre-defined list of values (`enum` data type) | -| Array type | List of related records from another model | -| Object type | The `{}` symbol can refer to one of the two types of fields.

• Relation field
• JSON field | +| Field data type | Description | +| :-------------------------------------------------------------------------------: | ------------------------------------ | +| | Text | +| | Integer | +| | Date-time

| +| | Boolean
| +| | Pre-defined list of values (`enum` data type) | +| | List of related records from another model | +| | The `{}` symbol can refer to one of the two types of fields.

• Relation field
• JSON field | ### Keyboard shortcuts in models @@ -72,7 +80,7 @@ With Prisma Studio open, you can open the keyboard shortcuts modal by pressing < Prisma Studio - Keyboard shortcuts @@ -108,15 +116,15 @@ To paste in another cell, first double-click the cell to enter edit mode, and th 1. In the model view, click **Add record**. 2. Based on the data allowed in each field, type the data for the record. - | Field data type | Description | - | :-------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | String type | Text | - | Number type | Integer

If such a field has `autoincrement()` pre-filled, do not edit the cell and do not add a number manually. | - | Datetime type | Date-time

Date-time fields contain a long string of numbers, letters, and others. As a best practice, copy the value of another date-time cell and modify it as necessary before pasting in the field. | - | Boolean type | Boolean

Select `true` or `false`. | - | Enum type | Pre-defined list

Double-click a cell in the field and select one of the pre-defined options. | - | Array type | List of related records from another model

It typically refers to a list of records that exist in another model in the database. If you are adding a new record and records from the related model do not yet exist, you do not need to enter anything in the current model. | - | Object type | The `{}` symbol can refer to one of the two types of fields.

• Relation field
• JSON field

**Relation with a model defined separately in the database**

Typically, you need to select the same value as any of the previous records
Click the name of the model to see the list of values which you can then select for the related field.

**JSON field**

Double-click the field to edit the JSON data. As a best practice, validate the edited JSON data in a validator and paste it back in the cell. | + | Field data type | Description | + | :-------------------------------------------------------------------------------: | ------------------ | + | | Text | + | | Integer

If such a field has `autoincrement()` pre-filled, do not edit the cell and do not add a number manually. | + | | Date-time

Date-time fields contain a long string of numbers, letters, and others. As a best practice, copy the value of another date-time cell and modify it as necessary before pasting in the field. | + | | Boolean

Select `true` or `false`. | + | | Pre-defined list

Double-click a cell in the field and select one of the pre-defined options. | + | | List of related records from another model

It typically refers to a list of records that exist in another model in the database. If you are adding a new record and records from the related model do not yet exist, you do not need to enter anything in the current model. | + | | The `{}` symbol can refer to one of the two types of fields.

• Relation field
• JSON field

**Relation with a model defined separately in the database**

Typically, you need to select the same value as any of the previous records
Click the name of the model to see the list of values which you can then select for the related field.

**JSON field**

Double-click the field to edit the JSON data. As a best practice, validate the edited JSON data in a validator and paste it back in the cell. | 3. (Optional) If you are unhappy with your changes, click **Discard changes** and start over. 4. Click **Save 1 change**. @@ -146,10 +154,7 @@ Deleting a record is a separate operation that cannot be accumulated. If you del -Prisma Studio - Save multiple data edits +![Prisma Studio - Save multiple data edits](./images/prisma-studio/04-save-multiple-changes.png) ## Filters @@ -189,7 +194,7 @@ When you add multiple conditions, Prisma Studio filters the results so that all 4. To add a new filter, click **Add a new filter** and repeat the steps above. 5. To remove a filter, click the **x** button on the right. Prisma Studio - add and remove filters @@ -218,7 +223,7 @@ For more information, see [Defining fields](/orm/prisma-schema/data-model/models 1. Click the **Fields** menu. 2. Select only the fields you want to see and deselect any fields you want to hide. Prisma Studio - show and hide fields @@ -247,7 +252,7 @@ A **record** refers to a **row of data in a table** in a relational database (Po 2. In the **Take** box, specify the maximum number of records that you want the model view to show. 3. In the **Skip** box, specify how many of the first records you want to hide. Prisma Studio - Show and hide records @@ -265,7 +270,7 @@ Click a field title to sort by the field data. The first click sorts the data in ascending order, the second - in descending order. Prisma Studio - Sort data diff --git a/content/300-accelerate/580-local-development.mdx b/content/300-accelerate/580-local-development.mdx index b0dd32c5c1..40ca363ff6 100644 --- a/content/300-accelerate/580-local-development.mdx +++ b/content/300-accelerate/580-local-development.mdx @@ -19,7 +19,8 @@ This guide will explain how to use Prisma Accelerate client extension in a devel ## Using Prisma Accelerate client extension in development and production
- + +![](/img/accelerate/accelerate-in-dev.png) Accelerate does not work with a local database. However, in a development environment, you can still use Prisma Client with the Accelerate client extension. This setup will not provide Accelerate's connection pooling and caching features. @@ -50,7 +51,7 @@ The following steps outline how to use Prisma ORM and Prisma Accelerate with a l > The extended instance of Prisma Client will use the local database. Hence, Prisma Accelerate will not be used in your development environment to respond to your Prisma Client queries. - +![](/img/accelerate/accelerate-in-prod.png) If an Accelerate connection string is used as the `DATABASE_URL` environment variable, Prisma Client will route your queries through Accelerate. diff --git a/content/600-about/200-prisma-docs/20-style-guide/06-image-guidelines.mdx b/content/600-about/200-prisma-docs/20-style-guide/06-image-guidelines.mdx index 6a2202f2da..ff4404d259 100644 --- a/content/600-about/200-prisma-docs/20-style-guide/06-image-guidelines.mdx +++ b/content/600-about/200-prisma-docs/20-style-guide/06-image-guidelines.mdx @@ -33,7 +33,7 @@ You can take screenshots with your favorite tool. We find it very easy to use Sn SnagIt - Screenshot canvas shadow @@ -43,7 +43,7 @@ You can take screenshots with your favorite tool. We find it very easy to use Sn If you can, avoid annotations. If necessary, apply annotations that are minimal and similar in style to the screenshot below. Data Browser - Save multiple changes @@ -59,7 +59,7 @@ For details, see the sections below. Again, we suggest the use of SnagIt as a be - Apply a white outline on the text. This ensures that the black text will be visible in Dark mode. SnagIt - Screenshot text annotations @@ -70,7 +70,7 @@ For details, see the sections below. Again, we suggest the use of SnagIt as a be - If you have text annotations that use arrows or lines to point to an area on the screenshot, a small part of the line or arrow should appear on the canvas (and outside of the screenshot). - Apply a centered shadow on each pointer and make the shadow color white. This ensures that the part of the line that is outside of the screenshot remains visible in Dark mode. SnagIt - Screenshot arrow line annotations @@ -153,7 +153,7 @@ If you need to shrink an image by width, use the `` component. ```html SnagIt - Screenshot text annotations diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/save-multiple-changes.png b/content/600-about/200-prisma-docs/20-style-guide/images/save-multiple-changes.png new file mode 100644 index 0000000000..3d8346b47a Binary files /dev/null and b/content/600-about/200-prisma-docs/20-style-guide/images/save-multiple-changes.png differ diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/snagit-arrow-line-config.png b/content/600-about/200-prisma-docs/20-style-guide/images/snagit-arrow-line-config.png new file mode 100644 index 0000000000..ed971ac716 Binary files /dev/null and b/content/600-about/200-prisma-docs/20-style-guide/images/snagit-arrow-line-config.png differ diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/snagit-screenshot-shadow-config.png b/content/600-about/200-prisma-docs/20-style-guide/images/snagit-screenshot-shadow-config.png new file mode 100644 index 0000000000..a0124fa114 Binary files /dev/null and b/content/600-about/200-prisma-docs/20-style-guide/images/snagit-screenshot-shadow-config.png differ diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/snagit-text-annotation-config.png b/content/600-about/200-prisma-docs/20-style-guide/images/snagit-text-annotation-config.png new file mode 100644 index 0000000000..8b44e710b5 Binary files /dev/null and b/content/600-about/200-prisma-docs/20-style-guide/images/snagit-text-annotation-config.png differ