Merge pull request #14442 from supabase/master

Prod deploy dashboard

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -939,7 +939,11 @@ export const platform = {
           name: 'Shared Responsibility Model',
           url: '/guides/platform/shared-responsibility-model',
         },
-        { name: 'Going into Production', url: '/guides/platform/going-into-prod' },
+        {
+          name: 'Maturity Model',
+          url: '/guides/platform/maturity-model',
+        },
+        { name: 'Production Checklist', url: '/guides/platform/going-into-prod' },
       ],
     },
     {

apps/docs/pages/guides/auth/social-login/auth-azure.mdx

@@ -91,6 +91,21 @@ async function signout() {
 }
 ```
 
+## Obtain the provider refresh token
+
+Azure OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to include the following scope:
+
+```js
+async function signInWithAzure() {
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'azure',
+    options: {
+      scopes: 'offline_access',
+    },
+  })
+}
+```
+
 ## Resources
 
 - [Azure Developer Account](https://portal.azure.com)

apps/docs/pages/guides/auth/social-login/auth-google.mdx

@@ -83,6 +83,18 @@ async function signInWithGoogle() {
 }
 ```
 
+You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient).
+
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+
+```js
+async function signout() {
+  const { error } = await supabase.auth.signOut()
+}
+```
+
+## Obtain the provider refresh token
+
 Google OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to add additional query parameters:
 
 ```js
@@ -99,16 +111,6 @@ async function signInWithGoogle() {
 }
 ```
 
-You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient).
-
-When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
-
-```js
-async function signout() {
-  const { error } = await supabase.auth.signOut()
-}
-```
-
 ## Resources
 
 - [Supabase Account - Free Tier OK](https://supabase.com)

apps/docs/pages/guides/functions/examples/rate-limiting.mdx

@@ -18,7 +18,7 @@ export const meta = {
 
 [Upstash](https://upstash.com/) provides an HTTP/REST based Redis client which is ideal for serverless use-cases and therefore works well with Supabase Edge Functions.
 
-Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/upstash-redis-ratelimit).
+Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/upstash-redis-counter).
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 

apps/docs/pages/guides/getting-started/architecture.mdx

@@ -156,8 +156,7 @@ As the profile of a developer changes over time, Supabase will continue to evolv
 
 ### Support existing tools
 
-Supabase supports existing tools and communities wherever possible. Supabase is more like a "community of communities" - each tool typically has its own community
-which we work with.
+Supabase supports existing tools and communities wherever possible. Supabase is more like a "community of communities" - each tool typically has its own community which we work with.
 Open source is something we approach [collaboratively](https://supabase.com/blog/supabase-series-b#giving-back): we employ maintainers, sponsor projects, invest in businesses, and develop our own open source tools.
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />

apps/docs/pages/guides/platform/access-control.mdx

@@ -36,8 +36,8 @@ If you are transferring ownership of your organization to someone else, you will
 
 The table below shows the corresponding permissions for each available role you can assign a team member in the Dashboard.
 
-| Permissions              | Owner                   | Administrator           | Developer               |
-| ------------------------ | ----------------------- | ----------------------- | ----------------------- |
+| Permissions              | Owner                   | Administrator           | Developer               | Read only [^2]          |
+| ------------------------ | ----------------------- | ----------------------- | ----------------------- | ----------------------- |
 | **Organization**         |
 | Change organization name | <IconCheck size={14} /> |                         |                         |
 | Delete organization      | <IconCheck size={14} /> |                         |                         |
@@ -70,6 +70,8 @@ The table below shows the corresponding permissions for each available role you
 | Pause a project          | <IconCheck size={14} /> | <IconCheck size={14} /> |                         |
 | Resume a project         | <IconCheck size={14} /> | <IconCheck size={14} /> |                         |
 | Restart a project        | <IconCheck size={14} /> | <IconCheck size={14} /> | <IconCheck size={14} /> |
+| Manage tables            | <IconCheck size={14} /> | <IconCheck size={14} /> | <IconCheck size={14} /> |
+| View Data                | <IconCheck size={14} /> | <IconCheck size={14} /> | <IconCheck size={14} /> | <IconCheck size={14} /> |
 
 [^1]:
     Invites sent from a SSO account can only be accepted by another SSO account
@@ -77,6 +79,8 @@ The table below shows the corresponding permissions for each available role you
     prevents accidental invites to accounts not managed by your company's
     enterprise systems.
 
+[^2]: Available on the Teams and Enterprise Tiers.
+
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page

apps/docs/pages/guides/platform/going-into-prod.mdx

@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
   id: 'going-into-prod',
-  title: 'Going into Production',
+  title: 'Production Checklist',
   description: 'Things to do before making your app publicly available',
 }
 
@@ -85,17 +85,6 @@ After developing your project and deciding it's Production Ready, you should run
 - When working with enterprise systems, email scanners may scan and make a `GET` request to the reset password link or sign up link in your email. Since links in Supabase Auth are single use, a user who opens an email post-scan to click on a link will receive an error. To get around this problem,
   consider altering the email template to replace the original magic link with a link to a domain you control. The domain can present the user with a "Sign-in" button which redirect the user to the original magic link URL when clicked.
 
-### Restricted Access Levels for Team Members
-
-As your team grows, consider the different [access levels](/docs/guides/platform/access-control) that your team requires.
-
-- Free and Pro: Supabase provides access controls within the Dashboard for Developers and Administrators.
-- Teams and Enterprise: these tiers include advanced access controls, such as read-only Dashboard roles.
-
-For a more secure setup, consider running your workload across several organizations. It's a common pattern to have a Production organization which is restricted to only those team members who are qualified to have direct access to production databases.
-
-One other small tip: the [PGAudit](/docs/guides/database/extensions/pgaudit) extension tracks changes to your database. You can use it to track schema changes.
-
 ## Next steps
 
 This checklist is always growing so be sure to check back frequently, and also feel free to suggest additions and amendments by making a PR on [GitHub](https://github.com/supabase/supabase).

apps/docs/pages/guides/platform/maturity-model.mdx

@@ -0,0 +1,49 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'maturity-model',
+  title: 'Maturity Model',
+  description: 'Growing with your application.',
+}
+
+Supabase is great for building something very fast _and_ for scaling up. However, it's important to note that as your application matures and your team expands, the practices you use for managing an application in production should not be the same as the practices you used for prototyping.
+
+## Prototyping
+
+The Dashboard is a quick and easy tool for building applications while you are prototyping. That said, we strongly recommend using [Migrations](/docs/guides/getting-started/local-development#database-migrations) to manage your database changes. You can use our CLI to [capture any changes](/docs/reference/cli/supabase-db-diff) you have made on the Dashboard so that you can commit them a version control system, like git.
+
+## Collaborating
+
+As soon as you start collaborating with team members, all project changes should be in version control. At this point we strongly recommend moving away from using the Dashboard for schema changes. Use migrations to manage your database, and check them into your version control system to track every change.
+
+Resources:
+
+- [Database migrations](/docs/guides/getting-started/local-development#database-migrations)
+- [Managing access on the Dashboard](/docs/guides/platform/access-control)
+- [PGAudit for Postgres](/docs/guides/database/extensions/pgaudit)
+
+## In Production
+
+Once your application is live, you should never change your database using the Dashboard. Supabase provides various [access levels](https://supabase.com/docs/guides/platform/access-control) for the Dashboard that can help enforce this. Some other important things to consider at this point include:
+
+- Read the [Production Checklist](docs/guides/platform/going-into-prod).
+- Make your team aware of the [Shared Responsibilities](/docs/guides/platform/shared-responsibility-model) between your organization and Supabase.
+- Design a [safe workflow](https://supabase.com/docs/guides/platform/shared-responsibility-model#you-decide-your-own-workflow) for managing your database. We strongly recommend running [multiple environments](/docs/guides/cli/managing-environments) as part of your development workflow (`local` -> `staging` -> `prod`).
+- As your database to grows, we strongly recommend moving to [Point-in-Time Recovery](/docs/guides/platform/backups#point-in-time-recovery). This is safer and has less impact on your database performance during maintenance windows.
+
+Resources:
+
+- [Database migrations](/docs/guides/getting-started/local-development#database-migrations)
+- [Managing access on the Dashboard](/docs/guides/platform/access-control)
+- [PGAudit for Postgres](/docs/guides/database/extensions/pgaudit)
+- [Managing environments](/docs/guides/cli/managing-environments)
+
+## Enterprise
+
+For a more secure setup, consider running your workload across several organizations. It's a common pattern to have a Production organization which is restricted to only those team members who are qualified to have direct access to production databases.
+
+Reach out to [growth@supabase.com](mailto:growth@supabase.com) if you need help designing a secure development workflow for your organization.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page

studio/components/to-be-cleaned/Charts/ChartRenderer.tsx

@@ -214,7 +214,7 @@ export function BarChart({
                     interval={data ? data.length - 2 : 0}
                     angle={0}
                     // stroke="#4B5563"
-                    tick={{ fontSize: '0px', color: CHART_COLORS.TICK }}
+                    tick={false}
                     axisLine={{ stroke: CHART_COLORS.AXIS }}
                     tickLine={{ stroke: CHART_COLORS.AXIS }}
                   />

studio/components/ui/Charts/AreaChart.tsx

@@ -97,7 +97,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
             interval={data.length - 2}
             angle={0}
             // hide the tick
-            tick={{ fontSize: '0px' }}
+            tick={false}
             // color the axis
             axisLine={{ stroke: CHART_COLORS.AXIS }}
             tickLine={{ stroke: CHART_COLORS.AXIS }}

studio/components/ui/Charts/BarChart.tsx

@@ -92,7 +92,7 @@ const BarChart: React.FC<BarChartProps> = ({
             interval={data.length - 2}
             angle={0}
             // hide the tick
-            tick={{ fontSize: '0px' }}
+            tick={false}
             // color the axis
             axisLine={{ stroke: CHART_COLORS.AXIS }}
             tickLine={{ stroke: CHART_COLORS.AXIS }}

studio/components/ui/Charts/StackedBarChart.tsx

@@ -84,7 +84,7 @@ const StackedBarChart: React.FC<Props> = ({
             dataKey={xAxisKey}
             interval={data.length - 2}
             angle={0}
-            tick={{ fontSize: '0px' }}
+            tick={false}
             axisLine={{ stroke: CHART_COLORS.AXIS }}
             tickLine={{ stroke: CHART_COLORS.AXIS }}
           />