diff --git a/apps/reference/_supabase_js/installing.mdx b/apps/reference/_supabase_js/installing.mdx index 960bac4e30f..96b254beca2 100644 --- a/apps/reference/_supabase_js/installing.mdx +++ b/apps/reference/_supabase_js/installing.mdx @@ -31,7 +31,7 @@ Find the source code on [GitHub](https://github.com/supabase/supabase-js). Or via CDN ```js - + //or - + ``` diff --git a/apps/reference/_supabase_js/working-with-types.md b/apps/reference/_supabase_js/working-with-types.md index 90314b8fa92..519650ed995 100644 --- a/apps/reference/_supabase_js/working-with-types.md +++ b/apps/reference/_supabase_js/working-with-types.md @@ -76,9 +76,9 @@ async function getMovies() { return await supabase.from('movies').select('id, title, actors(*)') } -type actors = Database['public']['Tables']['actors']['Row'] +type Actors = Database['public']['Tables']['actors']['Row'] type MoviesResponse = Awaited> type MoviesResponseSuccess = MoviesResponse['data'] & { - actors: actors[] + actors: Actors[] } ``` diff --git a/apps/reference/_supabase_js_versioned_docs/version-v1/installing.mdx b/apps/reference/_supabase_js_versioned_docs/version-v1/installing.mdx index 18d83d1fe6f..4441c7253d7 100644 --- a/apps/reference/_supabase_js_versioned_docs/version-v1/installing.mdx +++ b/apps/reference/_supabase_js_versioned_docs/version-v1/installing.mdx @@ -31,7 +31,7 @@ Find the source code on [GitHub](https://github.com/supabase/supabase-js). Or via CDN ```js - + //or - + ``` diff --git a/apps/reference/docs/guides/auth/auth-helpers/sveltekit.mdx b/apps/reference/docs/guides/auth/auth-helpers/sveltekit.mdx index 67b655863dc..5ba0d72572a 100644 --- a/apps/reference/docs/guides/auth/auth-helpers/sveltekit.mdx +++ b/apps/reference/docs/guides/auth/auth-helpers/sveltekit.mdx @@ -104,7 +104,7 @@ Edit your `+layout.svelte` file and set up the client-side. ### Set up hooks -The `hooks.ts` file is where the heavy lifting of this library happens: +The `hooks.server.ts` file is where the heavy lifting of this library happens: ```ts title="src/hooks.server.ts" // make sure the supabase instance is initialized on the server diff --git a/apps/reference/docs/guides/cli/cicd-workflow.mdx b/apps/reference/docs/guides/cli/cicd-workflow.mdx index 875d240c300..07afed16df8 100644 --- a/apps/reference/docs/guides/cli/cicd-workflow.mdx +++ b/apps/reference/docs/guides/cli/cicd-workflow.mdx @@ -348,6 +348,24 @@ Once pushed, check that the migration version is up to date for both local and r supabase migration list ``` +### Permission denied on db remote commit + +If you have been using Supabase hosted projects for a long time, you might encounter the following permission error when executing `db remote commit`. + +```bash +Error: Error running pg_dump on remote database: pg_dump: error: query failed: ERROR: permission denied for table _type + +pg_dump: error: query was: LOCK TABLE "graphql"."_type" IN ACCESS SHARE MODE +``` + +To resolve this error, you need to grant `postgres` role permissions to `graphql` schema. You can do that by running the following query from Supabase dashboard's SQL Editor. + +```sql +grant all on all tables in schema graphql to postgres, anon, authenticated, service_role; +grant all on all functions in schema graphql to postgres, anon, authenticated, service_role; +grant all on all sequences in schema graphql to postgres, anon, authenticated, service_role; +``` + ### Permission denied on db push If you created a table through Supabase dashboard, and your new migration script contains `ALTER TABLE` statements, you might run into permission error when applying them on staging or production databases. @@ -358,12 +376,14 @@ ERROR: must be owner of table employees (SQLSTATE 42501); while executing migrat This is because tables created through Supabase dashboard are owned by `supabase_admin` role while the migration scripts executed through CLI are under `postgres` role. -One way to solve this is to grant `postgres` role additional privileges through the SQL Editor available on Supabase dashboard. For example, the following command grants postgres permissions to alter any table in the public schema. +One way to solve this is to reassign the owner of those tables to `postgres` role. For example, if your table is named `users` in the public schema, you can run the following command to reassign owner. ```sql -GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO postgres; +ALTER TABLE users OWNER TO postgres; ``` +Apart from tables, you also need to reassign owner of other entities using their respective commands, including [types](https://www.postgresql.org/docs/current/sql-alterschema.html), [functions](https://www.postgresql.org/docs/current/sql-alterroutine.html), and [schemas](https://www.postgresql.org/docs/current/sql-altertype.html). + ### Rebasing new migrations Sometimes your teammate may merge a new migration file to git main branch, and now you need to rebase your local schema changes on top. diff --git a/apps/reference/docs/guides/integrations/prisma.mdx b/apps/reference/docs/guides/integrations/prisma.mdx index 1915b3a8b9f..e7f8d517ccc 100644 --- a/apps/reference/docs/guides/integrations/prisma.mdx +++ b/apps/reference/docs/guides/integrations/prisma.mdx @@ -62,7 +62,7 @@ This project comes with TypeScript configured and has the following structure. ### Configuring the project to use PostgreSQL Go ahead and delete the `prisma/dev.db` file because we will be switching to PostgreSQL. -Next, inside the `prisma/.env` file, update the value of the `DATABASE_URL` variable to the connection string you got in **step 3**. The URL might look as follows: +Next, inside the `prisma/.env` file, update the value of the `DATABASE_URL` variable to the connection string you got in **step 1**. The URL might look as follows: ```env # prisma/.env @@ -122,7 +122,7 @@ This will create a `prisma/migrations` folder inside your `prisma` directory and If you’re working in a serverless environment (for example Node.js functions hosted on AWS Lambda, Vercel or Netlify Functions), you need to set up [connection pooling](https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#serverless-environments-faas) using a tool like [PgBouncer](https://www.pgbouncer.org/). That’s because every function invocation may result in a [new connection to the database](https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#the-serverless-challenge). Supabase [supports connection management using PgBouncer](https://supabase.io/blog/2021/04/02/supabase-pgbouncer#what-is-connection-pooling) and are enabled by default. Go to the **Database** page from the sidebar in the Supabase dashboard and navigate to **connection pool** settings ![Connection pool settings](/img/guides/integrations/prisma/w0oowg8vq435ob5c3gf0.png) -When running migrations you need to use the non pooled connection URL (like the one we used in **step 4**). However, when deploying your app, you’ll use the pooled connection URL and add the `?pgbouncer=true` flag to the PostgreSQL connection URL. To minimize the number of concurrent connections, setting the `connection_limit` to `1` is also recommended. So the URL might look as follows: +When running migrations you need to use the non pooled connection URL (like the one we used in **step 1**). However, when deploying your app, you’ll use the pooled connection URL and add the `?pgbouncer=true` flag to the PostgreSQL connection URL. To minimize the number of concurrent connections, setting the `connection_limit` to `1` is also recommended. So the URL might look as follows: ```env # prisma/.env diff --git a/apps/reference/docs/guides/with-angular.mdx b/apps/reference/docs/guides/with-angular.mdx index 93389bfc2df..2d4dc88df31 100644 --- a/apps/reference/docs/guides/with-angular.mdx +++ b/apps/reference/docs/guides/with-angular.mdx @@ -33,7 +33,7 @@ If you want to do it yourself, let's get started! ### GitHub -Whenever you get stuck at any point, take a look at [this repo](https://github.com/angular-supa/supabase-angular-user-management). +Whenever you get stuck at any point, take a look at [this repo](https://github.com/supabase/examples/tree/main/supabase-js-v2/user-management/angular-user-management). ## Project set up @@ -180,281 +180,365 @@ export const environment = { Now that we have the API credentials in place, let's create a **SupabaseService** with `ng g s supabase` to initialize the Supabase client and implement functions to communicate with the Supabase API. ```ts title="src/app/supabase.service.ts" -import { Injectable } from '@angular/core' +import { Injectable } from '@angular/core'; import { AuthChangeEvent, + AuthSession, createClient, Session, SupabaseClient, -} from '@supabase/supabase-js' -import { environment } from '../environments/environment' + User, +} from '@supabase/supabase-js'; +import { environment } from 'src/environments/environment'; +import { Database } from 'src/schema'; export interface Profile { - username: string - website: string - avatar_url: string + id?: string; + username: string; + website: string; + avatar_url: string; } @Injectable({ providedIn: 'root', }) export class SupabaseService { - private supabase: SupabaseClient + private supabase: SupabaseClient; + _session: AuthSession | null = null; constructor() { this.supabase = createClient( environment.supabaseUrl, environment.supabaseKey - ) - } - - get user() { - return this.supabase.auth.user() + ); } get session() { - return this.supabase.auth.session() + this.supabase.auth.getSession().then(({ data }) => { + this._session = data.session; + }) + return this._session; } - get profile() { + profile(user: User) { return this.supabase .from('profiles') .select(`username, website, avatar_url`) - .eq('id', this.user?.id) - .single() + .eq('id', user.id) + .single(); } authChanges( callback: (event: AuthChangeEvent, session: Session | null) => void ) { - return this.supabase.auth.onAuthStateChange(callback) + return this.supabase.auth.onAuthStateChange(callback); } signIn(email: string) { - return this.supabase.auth.signIn({ email }) + return this.supabase.auth.signInWithOtp({ email }); } signOut() { - return this.supabase.auth.signOut() + return this.supabase.auth.signOut(); } updateProfile(profile: Profile) { const update = { ...profile, - id: this.user?.id, updated_at: new Date(), - } + }; - return this.supabase.from('profiles').upsert(update, { - returning: 'minimal', // Don't return the value after inserting - }) + return this.supabase.from('profiles').upsert(update); } downLoadImage(path: string) { - return this.supabase.storage.from('avatars').download(path) + return this.supabase.storage.from('avatars').download(path); } uploadAvatar(filePath: string, file: File) { - return this.supabase.storage.from('avatars').upload(filePath, file) + return this.supabase.storage.from('avatars').upload(filePath, file); } } ``` -And one optional step is to update the CSS file `src/index.css` to make the app look nice. -You can find the full contents of this file [here](https://raw.githubusercontent.com/angular-supa/supabase-angular-user-management/main/src/styles.css). +Optionally, update [src/styles.css](https://raw.githubusercontent.com/supabase/examples/main/supabase-js-v2/user-management/angular-user-management/src/styles.css) to style the app. ### Set up a Login component Let's set up an Angular component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords. Create an **AuthComponent** with `ng g c auth` Angular CLI command. -```ts title="src/app/auth.component.ts" -import { Component } from '@angular/core' -import { SupabaseService } from './supabase.service' +```ts title="src/app/auth/auth.component.ts" +import { Component, OnInit } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { SupabaseService } from '../supabase.service'; @Component({ selector: 'app-auth', - template: ` -
-
-

Supabase + Angular

-

Sign in via magic link with your email below

-
- -
-
- -
-
-
- `, + templateUrl: './auth.component.html', + styleUrls: ['./auth.component.css'], }) -export class AuthComponent { - loading = false +export class AuthComponent implements OnInit { + loading = false; - constructor(private readonly supabase: SupabaseService) {} + signInForm = this.formBuilder.group({ + email: '', + }); - async handleLogin(input: string) { + constructor( + private readonly supabase: SupabaseService, + private readonly formBuilder: FormBuilder + ) {} + + ngOnInit(): void {} + + async onSubmit(): Promise { try { - this.loading = true - await this.supabase.signIn(input) - alert('Check your email for the login link!') + this.loading = true; + const email = this.signInForm.value.email as string; + const { error } = await this.supabase.signIn(email); + if (error) throw error; + alert('Check your email for the login link!'); } catch (error) { - alert(error.error_description || error.message) + if (error instanceof Error) { + alert(error.message); + } } finally { - this.loading = false + this.signInForm.reset(); + this.loading = false; } } } ``` +```html title="src/app/auth/auth.component.html" +
+
+

Supabase + Angular

+

Sign in via magic link with your email below

+
+
+ + +
+
+ +
+
+
+
-
- - -
-
- - -
-
- - -
- -
- -
- -
- -
- - `, + templateUrl: './account.component.html', + styleUrls: ['./account.component.css'], }) export class AccountComponent implements OnInit { - loading = false - profile: Profile | undefined + loading = false; + profile!: Profile; - @Input() session: Session | undefined + @Input() + session!: AuthSession; - constructor(private readonly supabase: SupabaseService) {} + updateProfileForm = this.formBuilder.group({ + username: '', + website: '', + avatar_url: '', + }); - ngOnInit() { - this.getProfile() + constructor( + private readonly supabase: SupabaseService, + private formBuilder: FormBuilder + ) {} + + async ngOnInit(): Promise { + await this.getProfile(); + + const { username, website, avatar_url } = this.profile; + this.updateProfileForm.patchValue({ + username, + website, + avatar_url, + }); } async getProfile() { try { - this.loading = true - let { data: profile, error, status } = await this.supabase.profile + this.loading = true; + const { user } = this.session; + let { data: profile, error, status } = await this.supabase.profile(user); if (error && status !== 406) { - throw error + throw error; } if (profile) { - this.profile = profile + this.profile = profile; } } catch (error) { - alert(error.message) + if (error instanceof Error) { + alert(error.message); + } } finally { - this.loading = false + this.loading = false; } } - async updateProfile( - username: string, - website: string, - avatar_url: string = '' - ) { + async updateProfile(): Promise { try { - this.loading = true - await this.supabase.updateProfile({ username, website, avatar_url }) + this.loading = true; + const { user } = this.session; + + const username = this.updateProfileForm.value.username as string; + const website = this.updateProfileForm.value.website as string; + const avatar_url = this.updateProfileForm.value.avatar_url as string; + + const { error } = await this.supabase.updateProfile({ + id: user.id, + username, + website, + avatar_url, + }); + if (error) throw error; } catch (error) { - alert(error.message) + if (error instanceof Error) { + alert(error.message); + } } finally { - this.loading = false + this.loading = false; } } async signOut() { - await this.supabase.signOut() + await this.supabase.signOut(); } } ``` +```html title="src/app/account/account.component.html" +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ +
+ +
+
+``` + ### Launch! Now that we have all the components in place, let's update **AppComponent**: ```ts title="src/app/app.component.ts" -import { Component, OnInit } from '@angular/core' -import { SupabaseService } from './supabase.service' +import { Component, OnInit } from '@angular/core'; +import { SupabaseService } from './supabase.service'; @Component({ selector: 'app-root', - template: ` -
- - - - -
- `, + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { - session = this.supabase.session + title = 'angular-user-management'; + + session = this.supabase.session; constructor(private readonly supabase: SupabaseService) {} ngOnInit() { - this.supabase.authChanges((_, session) => (this.session = session)) + this.supabase.authChanges((_, session) => (this.session = session)); } } ``` +```html title="src/app/app.component.html" +
+ + + + +
+``` + +`app.module.ts` also needs to be modified to include the `ReactiveFormsModule` from the `@angular/forms` package. + +```ts title="src/app/app.module.ts" +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { AuthComponent } from './auth/auth.component'; +import { AccountComponent } from './account/account.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { AvatarComponent } from './avatar/avatar.component'; + +@NgModule({ + declarations: [ + AppComponent, + AuthComponent, + AccountComponent, + AvatarComponent, + ], + imports: [BrowserModule, ReactiveFormsModule], + providers: [], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + Once that's done, run this in a terminal window: ```bash @@ -474,110 +558,141 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma Let's create an avatar for the user so that they can upload a profile photo. Create an **AvatarComponent** with `ng g c avatar` Angular CLI command. -```ts title="src/app/avatar.component.ts" -import { Component, EventEmitter, Input, Output } from '@angular/core' -import { SupabaseService } from './supabase.service' -import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' +```ts title="src/app/avatar/avatar.component.ts" +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; +import { SupabaseService } from '../supabase.service'; @Component({ selector: 'app-avatar', - template: ` -
- Avatar -
-
-
- - -
- `, + templateUrl: './avatar.component.html', + styleUrls: ['./avatar.component.css'], }) -export class AvatarComponent { - _avatarUrl: SafeResourceUrl | undefined - uploading = false +export class AvatarComponent implements OnInit { + _avatarUrl: SafeResourceUrl | undefined; + uploading = false; @Input() - set avatarUrl(url: string | undefined) { + set avatarUrl(url: string | null) { if (url) { - this.downloadImage(url) + this.downloadImage(url); } } - @Output() upload = new EventEmitter() + @Output() upload = new EventEmitter(); constructor( private readonly supabase: SupabaseService, private readonly dom: DomSanitizer ) {} + ngOnInit(): void {} + async downloadImage(path: string) { try { - const { data } = await this.supabase.downLoadImage(path) + const { data } = await this.supabase.downLoadImage(path); if (data instanceof Blob) { this._avatarUrl = this.dom.bypassSecurityTrustResourceUrl( URL.createObjectURL(data) - ) + ); } } catch (error) { - console.error('Error downloading image: ', error.message) + if (error instanceof Error) { + console.error('Error downloading image: ', error.message); + } } } async uploadAvatar(event: any) { try { - this.uploading = true + this.uploading = true; if (!event.target.files || event.target.files.length === 0) { - throw new Error('You must select an image to upload.') + throw new Error('You must select an image to upload.'); } - const file = event.target.files[0] - const fileExt = file.name.split('.').pop() - const fileName = `${Math.random()}.${fileExt}` - const filePath = `${fileName}` + const file = event.target.files[0]; + const fileExt = file.name.split('.').pop(); + const filePath = `${Math.random()}.${fileExt}`; - await this.supabase.uploadAvatar(filePath, file) - this.upload.emit(filePath) + await this.supabase.uploadAvatar(filePath, file); + this.upload.emit(filePath); } catch (error) { - alert(error.message) + if (error instanceof Error) { + alert(error.message); + } } finally { - this.uploading = false + this.uploading = false; } } } ``` +```html title="src/app/avatar/avatar.component.html" +
+ Avatar +
+
+
+ + +
+``` + ### Add the new widget And then we can add the widget on top of the **AccountComponent** html template: -```ts title="src/app/account.component.ts" -template: ` - - +```html title="src/app/account.component.html" +
+ + + +
+``` - -` +And add an `updateAvatar` function along with an `avatarUrl` getter to the **AccountComponent** typescript file: + +```ts title="src/app/account.component.ts" +@Component({ + selector: 'app-account', + templateUrl: './account.component.html', + styleUrls: ['./account.component.css'], +}) +export class AccountComponent implements OnInit { + // ... + get avatarUrl() { + return this.updateProfileForm.value.avatar_url as string; + } + + async updateAvatar(event: string): Promise { + this.updateProfileForm.patchValue({ + avatar_url: event, + }); + await this.updateProfile(); + } + // ... +} ``` ## Next steps diff --git a/apps/reference/generator/api.ts b/apps/reference/generator/api.ts index b15086938e7..602842c4014 100644 --- a/apps/reference/generator/api.ts +++ b/apps/reference/generator/api.ts @@ -10,7 +10,7 @@ export default async function gen( apiUrl: string ) { const specRaw = fs.readFileSync(inputFileName, 'utf8') - const spec = JSON.parse(specRaw) + const spec = JSON.parse(specRaw) as any // console.log('spec', spec) switch (spec.openapi || spec.swagger) { diff --git a/apps/reference/generator/cli.ts b/apps/reference/generator/cli.ts index d9708f0752d..9d554feb79f 100644 --- a/apps/reference/generator/cli.ts +++ b/apps/reference/generator/cli.ts @@ -6,8 +6,7 @@ import template from './templates/CliTemplate' import type { CliSpec } from './types/CliSpec' export default async function gen(inputFileName: string, outputDir: string) { - const spec = yaml.load(fs.readFileSync(inputFileName, 'utf8')) - // console.log('spec', spec) + const spec = yaml.load(fs.readFileSync(inputFileName, 'utf8')) as any switch (spec.clispec) { case '001': diff --git a/apps/reference/generator/config.ts b/apps/reference/generator/config.ts index 690a77dc833..378857b998c 100644 --- a/apps/reference/generator/config.ts +++ b/apps/reference/generator/config.ts @@ -12,7 +12,7 @@ type Section = { } export default async function gen(inputFileName: string, outputDir: string) { - const spec = yaml.load(fs.readFileSync(inputFileName, 'utf8')) + const spec = yaml.load(fs.readFileSync(inputFileName, 'utf8')) as any // console.log('spec', spec) switch (spec.configspec) { diff --git a/apps/reference/generator/sdk.ts b/apps/reference/generator/sdk.ts index ee290d16d2f..2adb10c3898 100644 --- a/apps/reference/generator/sdk.ts +++ b/apps/reference/generator/sdk.ts @@ -6,7 +6,7 @@ import { writeToDisk } from './helpers' import type { SdkSpec } from './types/SdkSpec' export default async function gen(inputFileName: string, outputDir: string) { - const spec = yaml.load(fs.readFileSync(inputFileName, 'utf8')) + const spec = yaml.load(fs.readFileSync(inputFileName, 'utf8')) as any // console.log('spec', spec) switch (spec.sdkspec) { diff --git a/apps/temp-docs/docs/javascript/installing.mdx b/apps/temp-docs/docs/javascript/installing.mdx index aeb6b0fff5a..80d1b5cf909 100644 --- a/apps/temp-docs/docs/javascript/installing.mdx +++ b/apps/temp-docs/docs/javascript/installing.mdx @@ -28,9 +28,9 @@ Find the source code on [GitHub](https://github.com/supabase/supabase-js). Or via CDN ```js - + //or - + ``` ## Python diff --git a/apps/temp-docs/docs/reference/javascript/installing.mdx b/apps/temp-docs/docs/reference/javascript/installing.mdx index aeb6b0fff5a..80d1b5cf909 100644 --- a/apps/temp-docs/docs/reference/javascript/installing.mdx +++ b/apps/temp-docs/docs/reference/javascript/installing.mdx @@ -28,9 +28,9 @@ Find the source code on [GitHub](https://github.com/supabase/supabase-js). Or via CDN ```js - + //or - + ``` ## Python diff --git a/apps/www/_blog/2022-10-14-postgres-full-text-search-vs-the-rest.mdx b/apps/www/_blog/2022-10-14-postgres-full-text-search-vs-the-rest.mdx new file mode 100644 index 00000000000..f96545c783a --- /dev/null +++ b/apps/www/_blog/2022-10-14-postgres-full-text-search-vs-the-rest.mdx @@ -0,0 +1,369 @@ +--- +title: 'Postgres Full Text Search vs the rest' +description: 'Comparing one of the most popular Postgres features against alternatives' +author: victor +image: postgres-fts-vs-the-rest/postgres-full-text-search.jpg +thumb: postgres-fts-vs-the-rest/postgres-full-text-search.jpg +tags: + - postgres +date: '2022-10-14' +toc_depth: 3 +--- + +Postgres is one of the best F/OSS databases partly because of its immense feature-set. + +One of my favorite Postgres features is [Full Text Search](https://supabase.com/docs/guides/database/full-text-search) (FTS). Search is a common requirement of applications. Well-known search engines like [Solr](https://solr.apache.org/) and [ElasticSearch](https://www.elastic.co/elasticsearch) are often a first choice, but with Postgres in your stack you've got a great chance for [Pareto improvement](https://en.wikipedia.org/wiki/Pareto_principle) at low complexity cost. + +Many projects function just fine with Postgres Full Text Search and other [built-in](https://www.postgresql.org/docs/current/contrib.html) extensions like [trigram search (`pg_trgm`)](https://www.postgresql.org/docs/current/pgtrgm.html). [GitLab's blog has a great article](https://about.staging.gitlab.com/blog/2016/03/18/fast-search-using-postgresql-trigram-indexes/) on their use of Trigram indices to speed up search. + +## Search Engines: The Next Generation + +These days, the debate isn't _just_ Postgres versus Solr or ElasticSearch, a new generation of F/OSS search engines has arrived. To name a few: + +- [MeiliSearch](https://www.meilisearch.com/) +- [OpenSearch](https://opensearch.org/) +- [SQLite FTS](https://www.sqlite.org/fts5.html) +- [Typesense](https://typesense.org/) + +Well OK, some of these engines aren't _quite_ new; SQLite is stable and has supported the search use-case for a while and OpenSearch is a fork of ElasticSearch. While not new, both are worth comparing as choices in front of engineers today (spoiler alert: we're going to compare them). + +These search engines are all impressive, but it's hard to evaluate these options in a `VACUUM`. + +If Postgres is already your main database, then it's probably easier to integrate than anything else. But would it be _better_ to take on more complexity by choosing a dedicated search engine? + +While search is an endlessly complicated problem and all of these tools are configurable, a comparison of minimal setup and tuning should yield some interesting insights. + +Before we get into it though, a _brief_ primer on what "Full Text Search" _means_, in Postgres land. + +## A whirlwind tour through FTS in Postgres + +If we want to compare other solutions to Postgres FTS, we'd better review how to set up and use [Postgres FTS](https://www.postgresql.org/docs/current/textsearch.html)! + +### Wrangling your existing data + +Imagine you have some information to search through, stored in your main database. + +Maybe a `movies` table with a structure like this: + +```sql + create table movies ( + id bigint primary key generated by default as identity, + title text not null, + original_title text not null, + overview text not null, + created_at timestamptz not null default now() +); +``` + +While you're inserting data you might perform `INSERTs` like this one: + +```sql +insert into movies ( + title, + original_title, + overview +) +values +( + "Avengers: Age of Ultron", + "Avengers: Age of Ultron", + "When Tony Stark tries to jumpstart a dormant peacekeeping program, things go awry and Earth’s Mightiest Heroes are put to the ultimate test as the fate of the planet hangs in the balance. As the villainous Ultron emerges, it is up to The Avengers to stop him from enacting his terrible plans, and soon uneasy alliances and unexpected action pave the way for an epic and unique global adventure.", +); +``` + +### Basic searching with select and like + +With nothing but the raw data in your database, we can actually do some _basic_ searching using `select` and comparison tools like `like`. + +```sql +select + * +from + movies +where + title like '%Avengers%' + or + overview like '%Avengers%'; +``` + +The `LIKE` [operator](https://www.postgresql.org/docs/current/functions-matching.html#FUNCTIONS-LIKE) as used in the query above will match _only_ the term "Avengers", but it will match it in any part of a given row's `title` or `overview`. + +We can hack around this basic functionality and make it a bit more robust: + +- Storing the text as [case insensitive text (`citext`)](https://www.postgresql.org/docs/current/citext.html) +- Combining the text that will be searched into one column +- Using a [GIN index](https://www.postgresql.org/docs/14/indexes-types.html#INDEXES-TYPES-GIN) + +Our "v0" would be better, but using `like` isn't quite what people mean when they ask for _robust_ full text search. **Not a bad first version, but Postgres can do much better.** + +### Robust Full Text Search with Postgres + +Postgres has built-in [Full Text Search](https://www.postgresql.org/docs/current/textsearch.html) which we can use instead of cobbling together our own with `like`. + +Luckily for us, [the Postgres FTS documentation](https://www.postgresql.org/docs/current/textsearch.html) is quite extensive, containing lots of information on the all-important [Postgres search data types: `tsvector` and `tsquery`](https://www.postgresql.org/docs/current/datatype-textsearch.html). + +State of the art search engines like [Solr](https://solr.apache.org/) do things to make searches work well: + +- [Stemming](https://en.wikipedia.org/wiki/Stemming) ("jumped", "jumper" -> "jump") +- [Lemmatization](https://en.wikipedia.org/wiki/lemmatization) ("better" -> "good") +- Result Ranking configuration +- Search by [edit distance](https://en.wikipedia.org/wiki/Levenshtein_distance) +- Vector based similarity (which you might use for a basic recommendation system) + +Postgres FTS does not do _all_ of the things a purpose-built search engine can do, but Postgres can produce very good results with decent performance. + +## A working Postgres FTS setup + +Integrating Full Text Search into our imaginary movies table is as simple as executing the following: + +```sql +-- Add a generated column that contains the search document +alter table movies + add column fts_doc_en + generated always as to_tsvector ( + 'english', title || ' ' || original_title || ' ' || overview + ) + stored; + +-- Create a GIN index to make our searches faster +create index movies_fts_doc_en_idx + on movies + using gin (fts_doc_en); +``` + +Postgres supports even more features like [facilities for ranking search results](https://www.postgresql.org/docs/current/textsearch-controls.html#TEXTSEARCH-RANKING) but for now we'll simply use `title`, `original_title`, and `overview` as they are. + +```sql +select + * from movies +where doc_en @@ websearch_to_tsquery('english', 'Avengers'); +``` + +## Comparable FTS engines + +Now that we've got a grasp on what FTS is and how it's used in Postgres, let's discuss a few of the alternative solutions Postgres can be compared to. + +As you might expect, this isn't an exhaustive list of FTS engines, there are many more that we're not covering here (If you've got another search engine you'd like to see featured, [file an issue](https://github.com/VADOSWARE/fts-benchmark/issues)). + +### SQLite FTS + +[SQLite](https://www.sqlite.org/) is arguably the most widely deployed database in the world. SQLite is a library that produces and manages single file (or in-memory) databases that run on phones, planes, laptops, kiosks, Raspberry Pis, and everything in between. + +Much like Postgres, SQLite is an excellent F/OSS project that has adopted the ability to perform Full Text Search. + +The [SQLite FTS documentation](https://www.sqlite.org/fts5.html) is extensive, and the FTS subsystems have undergone a few version upgrades -- [FTS 3/4](https://www.sqlite.org/fts3.html) and [SQLite FTS 5](https://www.sqlite.org/fts5.html) are both options. + +For our experiments we'll use SQLite FTS5. + +### TypeSense + +[TypeSense](https://typesense.org/) is a relatively new project that focuses on _lightning fast_, typo-tolerant open source search. Typesense boasts a high performance C++ codebase, promising nearly instant search results. + +TypeSense provides many demos with example datasets available for query, which you can try out: + +- [32MM songs from MusicBrainz](https://songs-search.typesense.org/) +- [28M books from OpenLibrary](https://books-search.typesense.org/) +- [XKCD comic search by topic](https://xkcd-search.typesense.org/) + +Typesense quite ambitiously brands itself as the "Algolia" and "Elasticsearch" alternative, offering to solve your search problems without requiring a PhD. + +### MeiliSearch + +[MeiliSearch](https://www.meilisearch.com/) is a new search engine written from the ground up in [Rust](https://rust-lang.org/), which also promises _lightning fast_ searches, flexibility, and typo tolerance. + +MeiliSearch has [extensive documentation](https://docs.meilisearch.com/), boasts an easy to use yet extendable architecture, and is well supported by a large community and team. + +### OpenSearch + +AWS [OpenSearch](https://opensearch.org/) is AWS's answer to ElasticSearch's license changes. While opinions are varied, ElasticSearch built a great piece (formerly Apache 2.0 licensed) piece of software, and the AWS fork represents at least a _stale_ measure of ElasticSearch's capabilities. + +OpenSearch is the _same_ as ElasticSearch (since the fork) but as it's license is much more permissive, it's the easy choice as a comparison to Postgres. + +In production make sure to evaluate ElasticSearch versus OpenSearch (or other solutions) sufficiently for your use case. + +## Testing our FTS solutions + +Well, how do we test performance of these disparate complex systems on an infinitely redefinable, hard-to-solve problem? By sticking to the use cases. + +Any search engine has two jobs: + +- Ingest information (usually referred to as "documents") +- Return documents that match user queries + +Ingesting information _can_ be important, but "search engine performance" usually refers to the second step - taking queries and outputting results. + +That is to say, the primary concern is assuming a cluster already has proper data loaded on to it, how fast can it deliver the relevant results for a user-submitted query? + +We'll focus on the end-user-centric meaning of performance here (query speed). + +### Getting a dataset + +[Hugging Face](https://huggingface.co/) has a [32MB movie data set](https://huggingface.co/spaces/Kamand/Movie_Recommendation/blob/main/movies_metadata.csv). We're interested in the follow columns in this data set: + +- `title` +- `original_title` +- `overview` + +Postgres is capable of loading CSVs, but since we'll be using other search engines as well, let's convert to format that's much easier to use and process - [Newline Delimited JSON](https://dataprotocols.org/ndjson/). + +After a few lines of code and one [`csv2ndjson.mjs` script](https://github.com/VADOSWARE/fts-benchmark/blob/main/src/util/csv2ndjson.mjs) later, we have a `movies.ndjson.json` full of JSON documents that we can easily ingest into any search engine (or other database for that matter!). + +### Inserting the data + +Each system ingests data slightly differently, but with a little scripting we can paper over the differences. + +[The code](https://github.com/VADOSWARE/fts-benchmark) contains a scheme of "drivers" which are minimal ES6 modules. + +Here's an example of the `ingest` function used for Postgres (with [`slonik`](https://github.com/gajus/slonik) as our DB driver): + +```js +// Ingesting search documents +async function ingest({ document, pool }) { + // Ignore rows without proper release dates + if (document.release_date.trim().length === 0) { + return + } + + await pool.query(sql` +insert into movies ( + id, + title, + original_title, + overview, + released_at +) +values +( + ${document.id}, + ${document.title}, + ${document.original_title}, + ${document.overview}, + ${new Date(document.release_date).toISOString()}::timestamptz +) +on conflict (id) do update set + title=${document.title}, + original_title=${document.original_title}, + overview=${document.overview}, + released_at=${new Date(document.release_date).toISOString()}::timestamptz +; +`) +} +``` + +The [repo](https://github.com/VADOSWARE/fts-benchmark/) contains the complete code for Postgres as well as the other search engines, written in much this same fashion. + +### Picking a set of queries + +This part is somewhat arbitrary - I've gotten a list of queries here that one might search for in terms of movies: + +``` +"super hero" +"superhero" +"superman" +"suprman" +"love" +"world war" +"spy" +"romance" +"comedy" +"awakening" +``` + +Thanks to [boinboing.net's article from 2018](https://boingboing.net/2018/04/30/the-most-common-words-in-movie.html), there are some words that show up quite often in movie titles that we can search for. + +The data set isn't very big, but doing all these searches in quick succession should be enough to get a realistic performance baseline. + +### Running the queries + +Similar to ingesting data, all the search engines take slightly different input for queries, so we'll change our simple string queries into whatever the relevant search engine expects to receive. + +Here's what that script looks like for Postgres: + +```js +// Querying search phrases +async function query({ phrase, pool }) { + const results = await pool.query(sql` +select id, title +from movies +where fts_doc_en @@ websearch_to_tsquery('english', ${phrase}::text) +`) + const ids = results.rows.map((r) => r.id) + return ids +} +``` + +No surprises there, just like the Postgres FTS example from earlier. + +## Automating our toil + +Once we've combined our scripting magic with some `Makefile` incantations, running the queries produces output like this: + +``` +TIMING=true FTS_ENGINE=pg make query +[info] importing driver from [./pg.mjs] +[info] finished initializing driver [pg] +[info] processing lines in [/path/to/pg-fts-benchmark/search-phrases.ndjson.json]... +[timing] phrase [super hero]: returned [34] results in 3.132471.ms +[timing] phrase [superhero]: returned [86] results in 1.180798.ms +[timing] phrase [superman]: returned [47] results in 0.912615.ms +[timing] phrase [suprman]: returned [0] results in 0.781712.ms +[timing] phrase [love]: returned [5417] results in 19.088668.ms +[timing] phrase [world war]: returned [834] results in 2.902097.ms +[timing] phrase [spy]: returned [349] results in 1.497892.ms +[timing] phrase [romance]: returned [630] results in 1.91661.ms +[timing] phrase [comedy]: returned [1213] results in 2.534538.ms +[timing] phrase [awakening]: returned [210] results in 2.443748.ms +[info] successfully processed [10] lines +``` + +Right off the bat we can see that Postgres is plenty quick! Some results are quite obvious - as you might expect, "love" is _quite_ a common search result. + +## Results + +With the `ingest` and `query` machinery defined for the search engines, it's easy to get some results. + + + +## What does the data tell us? + +There's a _lot_ of tuning left undone here, but a few points stand out right away: + +- Even when consuming similar content, engines can produce different results, but generally ratios between queries on the same engine should be consistent. +- Postgres FTS is quite close performance-wise to many other solutions, at least in their default configuration. +- Only Typesense and MeiliSearch properly handled mis-spellings (the "suprman" query). +- Typesense was relatively strict with matches compared to other engines. +- OpenSearch was _very_ fast with ingest, but the default configuration doesn't index misspellings. +- In-memory SQLite is by far the fastest, and PG isn't too far behind for this small data set. + +## Feedback from the other products + +Since this is a benchmark, we felt it was fair to give the other products an opportunity to give their feedback. + +### Meilisearch + +> I agree that using PG in simple use cases is an excellent way to be pragmatic. +> Unfortunately, PG will never be able to offer you a search experience like the one you could have with Meilisearch. Meilisearch has perfect management of typos and searches by prefix, allowing a search at each keystroke. Enhanced relevancy with rules such as the number of words present, the importance of the attribute, the proximity of the terms searched in the document, and custom parameters. The ability to mix textual, geographic, and facet searches. Meilisearch automatically understands almost all languages with the possibility of having synonyms and stop words. Meilisearch has an incredible performance even on large volumes of data, and no backend proxy is needed, thanks to complete API Key management. + +_Quentin de Quelen, Meilisearch CEO_ + +### Typesense + +> Some more context around Typesense's behavior: how loose or exact matches are done are configurable in Typesense. For eg, you can configure the number of typos that are accounted for (num_typos), and when typo tolerance should kick-in, only if a configurable amount of results are not found (typo_tokens_treshold). For multi keyword searches, you can configure Typesense to expand the search by dropping some of the keywords, until at least a configurable number of search results are found (drop_tokens_threshold). +> We've chosen specifically to keep the search tight because we received feedback from users that some results were confusing if we let the defaults be too loose. + +_Jason Bosco, Typesense CEO_ + +## Wrap-up + +While this certainly isn't "big data", it looks like Postgres has very much held it's own, even without too much wrangling/tuning. Postgres is clearly more than capable of delivering _good enough_ search for this very basic case. + +Special purpose systems are expected to out-perform a more general system like Postgres, but clearly result quality and search speed provided Postgres is likely to be _good enough_ for many use cases, and is “complexity neutral” -- no new systems needed! + +## More Postgres resources + +- [Postgres WASM by Snaplet and Supabase](https://supabase.com/blog/postgres-wasm) +- [Choosing a Postgres Primary Key](https://supabase.com/blog/choosing-a-postgres-primary-key) +- [Implementing "seen by" functionality with Postgres](https://supabase.com/blog/seen-by-in-postgresql) +- [Partial data dumps using Postgres Row Level Security](https://supabase.com/blog/partial-postgresql-data-dumps-with-rls) +- [Postgres Views](https://supabase.com/blog/postgresql-views) +- [Realtime Postgres RLS on Supabase](https://supabase.com/blog/realtime-row-level-security-in-postgresql) diff --git a/apps/www/components/CaseStudies/benchmark.tsx b/apps/www/components/CaseStudies/benchmark.tsx index 630e7b6e7cf..1e2a218bf1a 100644 --- a/apps/www/components/CaseStudies/benchmark.tsx +++ b/apps/www/components/CaseStudies/benchmark.tsx @@ -31,11 +31,6 @@ const Benchmark = () => {

- ) diff --git a/apps/www/components/Charts/PGCharts.tsx b/apps/www/components/Charts/PGCharts.tsx new file mode 100644 index 00000000000..0c0b4574770 --- /dev/null +++ b/apps/www/components/Charts/PGCharts.tsx @@ -0,0 +1,185 @@ +import { Tabs } from '@supabase/ui' +import { useState } from 'react' +import ReactMarkdown from 'react-markdown' +import { Bar, BarChart, Legend, ResponsiveContainer, XAxis, YAxis } from 'recharts' +import * as data from '~/data/blog/PostgresFTSComparison' + +import remarkGfm from 'remark-gfm' + +const barColors = { + pg: 'var(--colors-brand11)', + meilisearch: 'var(--colors-blue11)', + typesense: 'var(--colors-violet11)', + 'sqlite-disk': 'var(--colors-orange11)', + 'sqlite-mem': 'var(--colors-yellow11)', + opensearch: 'var(--colors-tomato11)', +} + +const dimensions = ['pg', 'meilisearch', 'typesense', 'sqlite-disk', 'sqlite-mem', 'opensearch'] + +const renderColorfulLegendText = (value: string, entry: any) => { + const { color } = entry + + return ( + + {value} + + ) +} + +const CustomizedAxisTick = (props: any) => { + const { x, y, stroke, payload } = props + + return ( + + + {payload.value} + + + ) +} + +const Chart = () => { + const [selection, setSelection] = useState('latency') + return ( +
+ setSelection(value)} + > + + + + + + + {selection !== 'raw_data' ? ( + + {/* // + @ts-ignore */} + + } + label={{ + value: + selection === 'latency' + ? 'Latency (ms)' + : selection === 'avg_latency' + ? 'Avg latency per result (ms)' + : 'Number of results', + position: 'insideBottom', + offset: -32, + fill: 'var(--colors-scale12)', + }} + /> + } + /> + {dimensions.map((dimension: string, index: number) => { + // @ts-ignore + return + })} + + + + ) : ( + + {` +| engine | query | number of results | latency (ms) | avg result latency (ms) | +|---------------|--------------|-------------------|--------------|-------------------------| +| \`pg\` | "super hero" | \`34\` | \`3.68\` | \`0.108\` | +| \`pg\` | "superhero" | \`86\` | \`1.59\` | \`0.0184\` | +| \`pg\` | "superman" | \`47\` | \`1.24\` | \`0.0264\` | +| \`pg\` | "suprman" | \`0\` | \`0.999\` | \`Infinity\` | +| \`pg\` | "love" | \`5417\` | \`15.3\` | \`0.00282\` | +| \`pg\` | "world war" | \`834\` | \`2.94\` | \`0.00352\` | +| \`pg\` | "spy" | \`349\` | \`1.78\` | \`0.00510\` | +| \`pg\` | "romance" | \`630\` | \`2.14\` | \`0.00339\` | +| \`pg\` | "comedy" | \`1213\` | \`3.55\` | \`0.00292\` | +| \`pg\` | "awakening" | \`210\` | \`1.93\` | \`0.00919\` | +| \`meilisearch\` | "super hero" | \`56\` | \`4.82\` | \`0.0861\` | +| \`meilisearch\` | "superhero" | \`14\` | \`4.39\` | \`0.313\` | +| \`meilisearch\` | "superman" | \`41\` | \`3.45\` | \`0.0841\` | +| \`meilisearch\` | "suprman" | \`29\` | \`2.69\` | \`0.0929\` | +| \`meilisearch\` | "love" | \`812\` | \`12.4\` | \`0.0153\` | +| \`meilisearch\` | "world war" | \`316\` | \`8.53\` | \`0.0270\` | +| \`meilisearch\` | "spy" | \`47\` | \`3.57\` | \`0.0760\` | +| \`meilisearch\` | "romance" | \`35\` | \`3.05\` | \`0.0871\` | +| \`meilisearch\` | "comedy" | \`67\` | \`3.46\` | \`0.0516\` | +| \`meilisearch\` | "awakening" | \`15\` | \`3.63\` | \`0.242\` | +| \`typesense\` | "super hero" | \`8\` | \`3.99\` | \`0.499\` | +| \`typesense\` | "superhero" | \`8\` | \`2.09\` | \`0.261\` | +| \`typesense\` | "superman" | \`28\` | \`2.71\` | \`0.0968\` | +| \`typesense\` | "suprman" | \`28\` | \`2.83\` | \`0.101\` | +| \`typesense\` | "love" | \`745\` | \`30.6\` | \`0.0411\` | +| \`typesense\` | "world war" | \`11\` | \`3.26\` | \`0.296\` | +| \`typesense\` | "spy" | \`47\` | \`3.78\` | \`0.0804\` | +| \`typesense\` | "romance" | \`34\` | \`2.68\` | \`0.0789\` | +| \`typesense\` | "comedy" | \`55\` | \`3.14\` | \`0.0571\` | +| \`typesense\` | "awakening" | \`14\` | \`2.07\` | \`0.148\` | +| \`sqlite-disk\` | "super hero" | \`20\` | \`0.682\` | \`0.0341\` | +| \`sqlite-disk\` | "superhero" | \`67\` | \`0.524\` | \`0.00782\` | +| \`sqlite-disk\` | "superman" | \`47\` | \`0.355\` | \`0.00755\` | +| \`sqlite-disk\` | "suprman" | \`0\` | \`0.0806\` | \`Infinity\` | +| \`sqlite-disk\` | "love" | \`4691\` | \`27.7\` | \`0.00590\` | +| \`sqlite-disk\` | "world war" | \`781\` | \`5.02\` | \`0.00642\` | +| \`sqlite-disk\` | "spy" | \`241\` | \`0.916\` | \`0.00380\` | +| \`sqlite-disk\` | "romance" | \`554\` | \`1.97\` | \`0.00355\` | +| \`sqlite-disk\` | "comedy" | \`1220\` | \`4.25\` | \`0.00349\` | +| \`sqlite-disk\` | "awakening" | \`63\` | \`0.303\` | \`0.00482\` | +| \`sqlite-mem\` | "super hero" | \`20\` | \`0.392\` | \`0.0196\` | +| \`sqlite-mem\` | "superhero" | \`67\` | \`0.237\` | \`0.00354\` | +| \`sqlite-mem\` | "superman" | \`47\` | \`0.193\` | \`0.00410\` | +| \`sqlite-mem\` | "suprman" | \`0\` | \`0.0568\` | \`Infinity\` | +| \`sqlite-mem\` | "love" | \`4691\` | \`13.4\` | \`0.00286\` | +| \`sqlite-mem\` | "world war" | \`781\` | \`2.93\` | \`0.00376\` | +| \`sqlite-mem\` | "spy" | \`241\` | \`0.644\` | \`0.00267\` | +| \`sqlite-mem\` | "romance" | \`554\` | \`1.43\` | \`0.00258\` | +| \`sqlite-mem\` | "comedy" | \`1220\` | \`2.91\` | \`0.00239\` | +| \`sqlite-mem\` | "awakening" | \`63\` | \`0.237\` | \`0.00377\` | +| \`opensearch\` | "super hero" | \`431\` | \`112\` | \`0.260\` | +| \`opensearch\` | "superhero" | \`45\` | \`12.6\` | \`0.281\` | +| \`opensearch\` | "superman" | \`25\` | \`11.4\` | \`0.454\` | +| \`opensearch\` | "suprman" | \`0\` | \`6.78\` | \`Infinity\` | +| \`opensearch\` | "love" | \`3036\` | \`139\` | \`0.0457\` | +| \`opensearch\` | "world war" | \`3805\` | \`149\` | \`0.0393\` | +| \`opensearch\` | "spy" | \`168\` | \`14.1\` | \`0.0842\` | +| \`opensearch\` | "romance" | \`383\` | \`23.9\` | \`0.0625\` | +| \`opensearch\` | "comedy" | \`756\` | \`40.1\` | \`0.0531\` | +| \`opensearch\` | "awakening" | \`32\` | \`9.84\` | \`0.307\` |`} + + )} +
+ ) +} + +export default Chart diff --git a/apps/www/components/EnterpriseContactForm.tsx b/apps/www/components/EnterpriseContactForm.tsx index ccbec6d937e..49850842d07 100644 --- a/apps/www/components/EnterpriseContactForm.tsx +++ b/apps/www/components/EnterpriseContactForm.tsx @@ -68,105 +68,116 @@ const EnterpriseContactForm = () => { return (
- {({ isSubmitting }: any) => ( -
-
- -
+ {({ values, isSubmitting }: any) => { + const selectedCountry = countries.find((country) => country.code === values['country']) + const phonePlaceholder = + selectedCountry !== undefined ? `+${selectedCountry.phone_code}` : '' -
-
+ return ( +
+
-
+
+
+ +
+ +
+ +
+
+ +
-
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- +
+ +
- -
- -
-
- )} + ) + }} {formSubmitted && ( diff --git a/apps/www/components/SOC2RequestForm.tsx b/apps/www/components/SOC2RequestForm.tsx new file mode 100644 index 00000000000..fecd010ddee --- /dev/null +++ b/apps/www/components/SOC2RequestForm.tsx @@ -0,0 +1,205 @@ +import { Button, Form, Input, Select } from '@supabase/ui' +import { useState } from 'react' +import countries from '~/data/Countries.json' +import supabase from '~/lib/supabase' + +const INITIAL_VALUES = { + companyName: '', + contactFirstName: '', + contactLastName: '', + contactEmail: '', + contactPhone: '', + companySize: '', + details: '', + country: 'US', +} + +const validate = (values: any) => { + const errors: any = {} + + if (!values.companyName) { + errors.companyName = 'Required' + } + + if (!values.contactFirstName) { + errors.contactFirstName = 'Required' + } + + if (!values.contactLastName) { + errors.contactLastName = 'Required' + } + + if (!values.contactEmail) { + errors.contactEmail = 'Required' + } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.contactEmail)) { + errors.contactEmail = 'Invalid email address' + } + + return errors +} + +const SOC2RequestForm = () => { + const [error, setError] = useState() + const [formSubmitted, setFormSubmitted] = useState(false) + + const handleFormSubmit = async (values: typeof INITIAL_VALUES, { resetForm }: any) => { + const { error } = await supabase.from('soc2_requests').insert([ + { + company_name: values.companyName, + contact_name: `${values.contactFirstName} ${values.contactLastName}`, + contact_first_name: values.contactFirstName, + contact_last_name: values.contactLastName, + contact_email: values.contactEmail, + contact_phone: values.contactPhone, + company_size: values.companySize, + details: values.details, + country: values.country, + }, + ]) + + if (!error) { + resetForm() + setFormSubmitted(true) + } else { + setError(error.message) + } + } + + return ( +
+ {formSubmitted ? ( +

+ Thank you for your submission! A member from the Supabase team will reach out to you + shortly! +

+ ) : ( + <> +
+ {({ values, isSubmitting }: any) => { + const selectedCountry = countries.find( + (country) => country.code === values['country'] + ) + const phonePlaceholder = + selectedCountry !== undefined ? `+${selectedCountry.phone_code}` : '' + + return ( +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ ) + }} +
+ {error &&

Error: {error}

} + + )} +
+ ) +} + +export default SOC2RequestForm diff --git a/apps/www/data/Countries.json b/apps/www/data/Countries.json index 5df305aeb22..29b926bf959 100644 --- a/apps/www/data/Countries.json +++ b/apps/www/data/Countries.json @@ -1,1002 +1,1252 @@ [ { "code": "AF", - "name": "Afghanistan" + "name": "Afghanistan", + "phone_code": "93" }, { "code": "AX", - "name": "Aland Islands" + "name": "Aland Islands", + "phone_code": "358-18" }, { "code": "AL", - "name": "Albania" + "name": "Albania", + "phone_code": "355" }, { "code": "DZ", - "name": "Algeria" + "name": "Algeria", + "phone_code": "213" }, { "code": "AS", - "name": "American Samoa" + "name": "American Samoa", + "phone_code": "1-684" }, { "code": "AD", - "name": "Andorra" + "name": "Andorra", + "phone_code": "376" }, { "code": "AO", - "name": "Angola" + "name": "Angola", + "phone_code": "244" }, { "code": "AI", - "name": "Anguilla" + "name": "Anguilla", + "phone_code": "1-264" }, { "code": "AQ", - "name": "Antarctica" + "name": "Antarctica", + "phone_code": "" }, { "code": "AG", - "name": "Antigua and Barbuda" + "name": "Antigua and Barbuda", + "phone_code": "1-268" }, { "code": "AR", - "name": "Argentina" + "name": "Argentina", + "phone_code": "54" }, { "code": "AM", - "name": "Armenia" + "name": "Armenia", + "phone_code": "374" }, { "code": "AW", - "name": "Aruba" + "name": "Aruba", + "phone_code": "297" }, { "code": "AU", - "name": "Australia" + "name": "Australia", + "phone_code": "61" }, { "code": "AT", - "name": "Austria" + "name": "Austria", + "phone_code": "43" }, { "code": "AZ", - "name": "Azerbaijan" + "name": "Azerbaijan", + "phone_code": "994" }, { "code": "BS", - "name": "Bahamas" + "name": "Bahamas", + "phone_code": "1-242" }, { "code": "BH", - "name": "Bahrain" + "name": "Bahrain", + "phone_code": "973" }, { "code": "BD", - "name": "Bangladesh" + "name": "Bangladesh", + "phone_code": "880" }, { "code": "BB", - "name": "Barbados" + "name": "Barbados", + "phone_code": "1-246" }, { "code": "BY", - "name": "Belarus" + "name": "Belarus", + "phone_code": "375" }, { "code": "BE", - "name": "Belgium" + "name": "Belgium", + "phone_code": "32" }, { "code": "BZ", - "name": "Belize" + "name": "Belize", + "phone_code": "501" }, { "code": "BJ", - "name": "Benin" + "name": "Benin", + "phone_code": "229" }, { "code": "BM", - "name": "Bermuda" + "name": "Bermuda", + "phone_code": "1-441" }, { "code": "BT", - "name": "Bhutan" + "name": "Bhutan", + "phone_code": "975" }, { "code": "BO", - "name": "Bolivia" + "name": "Bolivia", + "phone_code": "591" }, { "code": "BQ", - "name": "Bonaire, Saint Eustatius and Saba " + "name": "Bonaire, Saint Eustatius and Saba ", + "phone_code": "599" }, { "code": "BA", - "name": "Bosnia and Herzegovina" + "name": "Bosnia and Herzegovina", + "phone_code": "387" }, { "code": "BW", - "name": "Botswana" + "name": "Botswana", + "phone_code": "267" }, { "code": "BV", - "name": "Bouvet Island" + "name": "Bouvet Island", + "phone_code": "" }, { "code": "BR", - "name": "Brazil" + "name": "Brazil", + "phone_code": "55" }, { "code": "IO", - "name": "British Indian Ocean Territory" + "name": "British Indian Ocean Territory", + "phone_code": "246" }, { "code": "VG", - "name": "British Virgin Islands" + "name": "British Virgin Islands", + "phone_code": "1-284" }, { "code": "BN", - "name": "Brunei" + "name": "Brunei", + "phone_code": "673" }, { "code": "BG", - "name": "Bulgaria" + "name": "Bulgaria", + "phone_code": "359" }, { "code": "BF", - "name": "Burkina Faso" + "name": "Burkina Faso", + "phone_code": "226" }, { "code": "BI", - "name": "Burundi" + "name": "Burundi", + "phone_code": "257" }, { "code": "KH", - "name": "Cambodia" + "name": "Cambodia", + "phone_code": "855" }, { "code": "CM", - "name": "Cameroon" + "name": "Cameroon", + "phone_code": "237" }, { "code": "CA", - "name": "Canada" + "name": "Canada", + "phone_code": "1" }, { "code": "CV", - "name": "Cape Verde" + "name": "Cape Verde", + "phone_code": "238" }, { "code": "KY", - "name": "Cayman Islands" + "name": "Cayman Islands", + "phone_code": "1-345" }, { "code": "CF", - "name": "Central African Republic" + "name": "Central African Republic", + "phone_code": "236" }, { "code": "TD", - "name": "Chad" + "name": "Chad", + "phone_code": "235" }, { "code": "CL", - "name": "Chile" + "name": "Chile", + "phone_code": "56" }, { "code": "CN", - "name": "China" + "name": "China", + "phone_code": "86" }, { "code": "CX", - "name": "Christmas Island" + "name": "Christmas Island", + "phone_code": "61" }, { "code": "CC", - "name": "Cocos Islands" + "name": "Cocos Islands", + "phone_code": "61" }, { "code": "CO", - "name": "Colombia" + "name": "Colombia", + "phone_code": "57" }, { "code": "KM", - "name": "Comoros" + "name": "Comoros", + "phone_code": "269" }, { "code": "CK", - "name": "Cook Islands" + "name": "Cook Islands", + "phone_code": "682" }, { "code": "CR", - "name": "Costa Rica" + "name": "Costa Rica", + "phone_code": "506" }, { "code": "HR", - "name": "Croatia" + "name": "Croatia", + "phone_code": "385" }, { "code": "CU", - "name": "Cuba" + "name": "Cuba", + "phone_code": "53" }, { "code": "CW", - "name": "Curacao" + "name": "Curacao", + "phone_code": "599" }, { "code": "CY", - "name": "Cyprus" + "name": "Cyprus", + "phone_code": "357" }, { "code": "CZ", - "name": "Czech Republic" + "name": "Czech Republic", + "phone_code": "420" }, { "code": "CD", - "name": "Democratic Republic of the Congo" + "name": "Democratic Republic of the Congo", + "phone_code": "243" }, { "code": "DK", - "name": "Denmark" + "name": "Denmark", + "phone_code": "45" }, { "code": "DJ", - "name": "Djibouti" + "name": "Djibouti", + "phone_code": "253" }, { "code": "DM", - "name": "Dominica" + "name": "Dominica", + "phone_code": "1-767" }, { "code": "DO", - "name": "Dominican Republic" + "name": "Dominican Republic", + "phone_code": "1-809 and 1-829" }, { "code": "TL", - "name": "East Timor" + "name": "East Timor", + "phone_code": "670" }, { "code": "EC", - "name": "Ecuador" + "name": "Ecuador", + "phone_code": "593" }, { "code": "EG", - "name": "Egypt" + "name": "Egypt", + "phone_code": "20" }, { "code": "SV", - "name": "El Salvador" + "name": "El Salvador", + "phone_code": "503" }, { "code": "GQ", - "name": "Equatorial Guinea" + "name": "Equatorial Guinea", + "phone_code": "240" }, { "code": "ER", - "name": "Eritrea" + "name": "Eritrea", + "phone_code": "291" }, { "code": "EE", - "name": "Estonia" + "name": "Estonia", + "phone_code": "372" }, { "code": "ET", - "name": "Ethiopia" + "name": "Ethiopia", + "phone_code": "251" }, { "code": "FK", - "name": "Falkland Islands" + "name": "Falkland Islands", + "phone_code": "500" }, { "code": "FO", - "name": "Faroe Islands" + "name": "Faroe Islands", + "phone_code": "298" }, { "code": "FJ", - "name": "Fiji" + "name": "Fiji", + "phone_code": "679" }, { "code": "FI", - "name": "Finland" + "name": "Finland", + "phone_code": "358" }, { "code": "FR", - "name": "France" + "name": "France", + "phone_code": "33" }, { "code": "GF", - "name": "French Guiana" + "name": "French Guiana", + "phone_code": "594" }, { "code": "PF", - "name": "French Polynesia" + "name": "French Polynesia", + "phone_code": "689" }, { "code": "TF", - "name": "French Southern Territories" + "name": "French Southern Territories", + "phone_code": "" }, { "code": "GA", - "name": "Gabon" + "name": "Gabon", + "phone_code": "241" }, { "code": "GM", - "name": "Gambia" + "name": "Gambia", + "phone_code": "220" }, { "code": "GE", - "name": "Georgia" + "name": "Georgia", + "phone_code": "995" }, { "code": "DE", - "name": "Germany" + "name": "Germany", + "phone_code": "49" }, { "code": "GH", - "name": "Ghana" + "name": "Ghana", + "phone_code": "233" }, { "code": "GI", - "name": "Gibraltar" + "name": "Gibraltar", + "phone_code": "350" }, { "code": "GR", - "name": "Greece" + "name": "Greece", + "phone_code": "30" }, { "code": "GL", - "name": "Greenland" + "name": "Greenland", + "phone_code": "299" }, { "code": "GD", - "name": "Grenada" + "name": "Grenada", + "phone_code": "1-473" }, { "code": "GP", - "name": "Guadeloupe" + "name": "Guadeloupe", + "phone_code": "590" }, { "code": "GU", - "name": "Guam" + "name": "Guam", + "phone_code": "1-671" }, { "code": "GT", - "name": "Guatemala" + "name": "Guatemala", + "phone_code": "502" }, { "code": "GG", - "name": "Guernsey" + "name": "Guernsey", + "phone_code": "44-1481" }, { "code": "GN", - "name": "Guinea" + "name": "Guinea", + "phone_code": "224" }, { "code": "GW", - "name": "Guinea-Bissau" + "name": "Guinea-Bissau", + "phone_code": "245" }, { "code": "GY", - "name": "Guyana" + "name": "Guyana", + "phone_code": "592" }, { "code": "HT", - "name": "Haiti" + "name": "Haiti", + "phone_code": "509" }, { "code": "HM", - "name": "Heard Island and McDonald Islands" + "name": "Heard Island and McDonald Islands", + "phone_code": " " }, { "code": "HN", - "name": "Honduras" + "name": "Honduras", + "phone_code": "504" }, { "code": "HK", - "name": "Hong Kong" + "name": "Hong Kong", + "phone_code": "852" }, { "code": "HU", - "name": "Hungary" + "name": "Hungary", + "phone_code": "36" }, { "code": "IS", - "name": "Iceland" + "name": "Iceland", + "phone_code": "354" }, { "code": "IN", - "name": "India" + "name": "India", + "phone_code": "91" }, { "code": "ID", - "name": "Indonesia" + "name": "Indonesia", + "phone_code": "62" }, { "code": "IR", - "name": "Iran" + "name": "Iran", + "phone_code": "98" }, { "code": "IQ", - "name": "Iraq" + "name": "Iraq", + "phone_code": "964" }, { "code": "IE", - "name": "Ireland" + "name": "Ireland", + "phone_code": "353" }, { "code": "IM", - "name": "Isle of Man" + "name": "Isle of Man", + "phone_code": "44-1624" }, { "code": "IL", - "name": "Israel" + "name": "Israel", + "phone_code": "972" }, { "code": "IT", - "name": "Italy" + "name": "Italy", + "phone_code": "39" }, { "code": "CI", - "name": "Ivory Coast" + "name": "Ivory Coast", + "phone_code": "225" }, { "code": "JM", - "name": "Jamaica" + "name": "Jamaica", + "phone_code": "1-876" }, { "code": "JP", - "name": "Japan" + "name": "Japan", + "phone_code": "81" }, { "code": "JE", - "name": "Jersey" + "name": "Jersey", + "phone_code": "44-1534" }, { "code": "JO", - "name": "Jordan" + "name": "Jordan", + "phone_code": "962" }, { "code": "KZ", - "name": "Kazakhstan" + "name": "Kazakhstan", + "phone_code": "7" }, { "code": "KE", - "name": "Kenya" + "name": "Kenya", + "phone_code": "254" }, { "code": "KI", - "name": "Kiribati" + "name": "Kiribati", + "phone_code": "686" }, { "code": "XK", - "name": "Kosovo" + "name": "Kosovo", + "phone_code": "" }, { "code": "KW", - "name": "Kuwait" + "name": "Kuwait", + "phone_code": "965" }, { "code": "KG", - "name": "Kyrgyzstan" + "name": "Kyrgyzstan", + "phone_code": "996" }, { "code": "LA", - "name": "Laos" + "name": "Laos", + "phone_code": "856" }, { "code": "LV", - "name": "Latvia" + "name": "Latvia", + "phone_code": "371" }, { "code": "LB", - "name": "Lebanon" + "name": "Lebanon", + "phone_code": "961" }, { "code": "LS", - "name": "Lesotho" + "name": "Lesotho", + "phone_code": "266" }, { "code": "LR", - "name": "Liberia" + "name": "Liberia", + "phone_code": "231" }, { "code": "LY", - "name": "Libya" + "name": "Libya", + "phone_code": "218" }, { "code": "LI", - "name": "Liechtenstein" + "name": "Liechtenstein", + "phone_code": "423" }, { "code": "LT", - "name": "Lithuania" + "name": "Lithuania", + "phone_code": "370" }, { "code": "LU", - "name": "Luxembourg" + "name": "Luxembourg", + "phone_code": "352" }, { "code": "MO", - "name": "Macao" + "name": "Macao", + "phone_code": "853" }, { "code": "MK", - "name": "Macedonia" + "name": "Macedonia", + "phone_code": "389" }, { "code": "MG", - "name": "Madagascar" + "name": "Madagascar", + "phone_code": "261" }, { "code": "MW", - "name": "Malawi" + "name": "Malawi", + "phone_code": "265" }, { "code": "MY", - "name": "Malaysia" + "name": "Malaysia", + "phone_code": "60" }, { "code": "MV", - "name": "Maldives" + "name": "Maldives", + "phone_code": "960" }, { "code": "ML", - "name": "Mali" + "name": "Mali", + "phone_code": "223" }, { "code": "MT", - "name": "Malta" + "name": "Malta", + "phone_code": "356" }, { "code": "MH", - "name": "Marshall Islands" + "name": "Marshall Islands", + "phone_code": "692" }, { "code": "MQ", - "name": "Martinique" + "name": "Martinique", + "phone_code": "596" }, { "code": "MR", - "name": "Mauritania" + "name": "Mauritania", + "phone_code": "222" }, { "code": "MU", - "name": "Mauritius" + "name": "Mauritius", + "phone_code": "230" }, { "code": "YT", - "name": "Mayotte" + "name": "Mayotte", + "phone_code": "262" }, { "code": "MX", - "name": "Mexico" + "name": "Mexico", + "phone_code": "52" }, { "code": "FM", - "name": "Micronesia" + "name": "Micronesia", + "phone_code": "691" }, { "code": "MD", - "name": "Moldova" + "name": "Moldova", + "phone_code": "373" }, { "code": "MC", - "name": "Monaco" + "name": "Monaco", + "phone_code": "377" }, { "code": "MN", - "name": "Mongolia" + "name": "Mongolia", + "phone_code": "976" }, { "code": "ME", - "name": "Montenegro" + "name": "Montenegro", + "phone_code": "382" }, { "code": "MS", - "name": "Montserrat" + "name": "Montserrat", + "phone_code": "1-664" }, { "code": "MA", - "name": "Morocco" + "name": "Morocco", + "phone_code": "212" }, { "code": "MZ", - "name": "Mozambique" + "name": "Mozambique", + "phone_code": "258" }, { "code": "MM", - "name": "Myanmar" + "name": "Myanmar", + "phone_code": "95" }, { "code": "NA", - "name": "Namibia" + "name": "Namibia", + "phone_code": "264" }, { "code": "NR", - "name": "Nauru" + "name": "Nauru", + "phone_code": "674" }, { "code": "NP", - "name": "Nepal" + "name": "Nepal", + "phone_code": "977" }, { "code": "NL", - "name": "Netherlands" + "name": "Netherlands", + "phone_code": "31" }, { "code": "NC", - "name": "New Caledonia" + "name": "New Caledonia", + "phone_code": "687" }, { "code": "NZ", - "name": "New Zealand" + "name": "New Zealand", + "phone_code": "64" }, { "code": "NI", - "name": "Nicaragua" + "name": "Nicaragua", + "phone_code": "505" }, { "code": "NE", - "name": "Niger" + "name": "Niger", + "phone_code": "227" }, { "code": "NG", - "name": "Nigeria" + "name": "Nigeria", + "phone_code": "234" }, { "code": "NU", - "name": "Niue" + "name": "Niue", + "phone_code": "683" }, { "code": "NF", - "name": "Norfolk Island" + "name": "Norfolk Island", + "phone_code": "672" }, { "code": "KP", - "name": "North Korea" + "name": "North Korea", + "phone_code": "850" }, { "code": "MP", - "name": "Northern Mariana Islands" + "name": "Northern Mariana Islands", + "phone_code": "1-670" }, { "code": "NO", - "name": "Norway" + "name": "Norway", + "phone_code": "47" }, { "code": "OM", - "name": "Oman" + "name": "Oman", + "phone_code": "968" }, { "code": "PK", - "name": "Pakistan" + "name": "Pakistan", + "phone_code": "92" }, { "code": "PW", - "name": "Palau" + "name": "Palau", + "phone_code": "680" }, { "code": "PS", - "name": "Palestinian Territory" + "name": "Palestinian Territory", + "phone_code": "970" }, { "code": "PA", - "name": "Panama" + "name": "Panama", + "phone_code": "507" }, { "code": "PG", - "name": "Papua New Guinea" + "name": "Papua New Guinea", + "phone_code": "675" }, { "code": "PY", - "name": "Paraguay" + "name": "Paraguay", + "phone_code": "595" }, { "code": "PE", - "name": "Peru" + "name": "Peru", + "phone_code": "51" }, { "code": "PH", - "name": "Philippines" + "name": "Philippines", + "phone_code": "63" }, { "code": "PN", - "name": "Pitcairn" + "name": "Pitcairn", + "phone_code": "870" }, { "code": "PL", - "name": "Poland" + "name": "Poland", + "phone_code": "48" }, { "code": "PT", - "name": "Portugal" + "name": "Portugal", + "phone_code": "351" }, { "code": "PR", - "name": "Puerto Rico" + "name": "Puerto Rico", + "phone_code": "1-787 and 1-939" }, { "code": "QA", - "name": "Qatar" + "name": "Qatar", + "phone_code": "974" }, { "code": "CG", - "name": "Republic of the Congo" + "name": "Republic of the Congo", + "phone_code": "242" }, { "code": "RE", - "name": "Reunion" + "name": "Reunion", + "phone_code": "262" }, { "code": "RO", - "name": "Romania" + "name": "Romania", + "phone_code": "40" }, { "code": "RU", - "name": "Russia" + "name": "Russia", + "phone_code": "7" }, { "code": "RW", - "name": "Rwanda" + "name": "Rwanda", + "phone_code": "250" }, { "code": "BL", - "name": "Saint Barthelemy" + "name": "Saint Barthelemy", + "phone_code": "590" }, { "code": "SH", - "name": "Saint Helena" + "name": "Saint Helena", + "phone_code": "290" }, { "code": "KN", - "name": "Saint Kitts and Nevis" + "name": "Saint Kitts and Nevis", + "phone_code": "1-869" }, { "code": "LC", - "name": "Saint Lucia" + "name": "Saint Lucia", + "phone_code": "1-758" }, { "code": "MF", - "name": "Saint Martin" + "name": "Saint Martin", + "phone_code": "590" }, { "code": "PM", - "name": "Saint Pierre and Miquelon" + "name": "Saint Pierre and Miquelon", + "phone_code": "508" }, { "code": "VC", - "name": "Saint Vincent and the Grenadines" + "name": "Saint Vincent and the Grenadines", + "phone_code": "1-784" }, { "code": "WS", - "name": "Samoa" + "name": "Samoa", + "phone_code": "685" }, { "code": "SM", - "name": "San Marino" + "name": "San Marino", + "phone_code": "378" }, { "code": "ST", - "name": "Sao Tome and Principe" + "name": "Sao Tome and Principe", + "phone_code": "239" }, { "code": "SA", - "name": "Saudi Arabia" + "name": "Saudi Arabia", + "phone_code": "966" }, { "code": "SN", - "name": "Senegal" + "name": "Senegal", + "phone_code": "221" }, { "code": "RS", - "name": "Serbia" + "name": "Serbia", + "phone_code": "381" }, { "code": "SC", - "name": "Seychelles" + "name": "Seychelles", + "phone_code": "248" }, { "code": "SL", - "name": "Sierra Leone" + "name": "Sierra Leone", + "phone_code": "232" }, { "code": "SG", - "name": "Singapore" + "name": "Singapore", + "phone_code": "65" }, { "code": "SX", - "name": "Sint Maarten" + "name": "Sint Maarten", + "phone_code": "599" }, { "code": "SK", - "name": "Slovakia" + "name": "Slovakia", + "phone_code": "421" }, { "code": "SI", - "name": "Slovenia" + "name": "Slovenia", + "phone_code": "386" }, { "code": "SB", - "name": "Solomon Islands" + "name": "Solomon Islands", + "phone_code": "677" }, { "code": "SO", - "name": "Somalia" + "name": "Somalia", + "phone_code": "252" }, { "code": "ZA", - "name": "South Africa" + "name": "South Africa", + "phone_code": "27" }, { "code": "GS", - "name": "South Georgia and the South Sandwich Islands" + "name": "South Georgia and the South Sandwich Islands", + "phone_code": "" }, { "code": "KR", - "name": "South Korea" + "name": "South Korea", + "phone_code": "82" }, { "code": "SS", - "name": "South Sudan" + "name": "South Sudan", + "phone_code": "211" }, { "code": "ES", - "name": "Spain" + "name": "Spain", + "phone_code": "34" }, { "code": "LK", - "name": "Sri Lanka" + "name": "Sri Lanka", + "phone_code": "94" }, { "code": "SD", - "name": "Sudan" + "name": "Sudan", + "phone_code": "249" }, { "code": "SR", - "name": "Suriname" + "name": "Suriname", + "phone_code": "597" }, { "code": "SJ", - "name": "Svalbard and Jan Mayen" + "name": "Svalbard and Jan Mayen", + "phone_code": "47" }, { "code": "SZ", - "name": "Swaziland" + "name": "Swaziland", + "phone_code": "268" }, { "code": "SE", - "name": "Sweden" + "name": "Sweden", + "phone_code": "46" }, { "code": "CH", - "name": "Switzerland" + "name": "Switzerland", + "phone_code": "41" }, { "code": "SY", - "name": "Syria" + "name": "Syria", + "phone_code": "963" }, { "code": "TW", - "name": "Taiwan" + "name": "Taiwan", + "phone_code": "886" }, { "code": "TJ", - "name": "Tajikistan" + "name": "Tajikistan", + "phone_code": "992" }, { "code": "TZ", - "name": "Tanzania" + "name": "Tanzania", + "phone_code": "255" }, { "code": "TH", - "name": "Thailand" + "name": "Thailand", + "phone_code": "66" }, { "code": "TG", - "name": "Togo" + "name": "Togo", + "phone_code": "228" }, { "code": "TK", - "name": "Tokelau" + "name": "Tokelau", + "phone_code": "690" }, { "code": "TO", - "name": "Tonga" + "name": "Tonga", + "phone_code": "676" }, { "code": "TT", - "name": "Trinidad and Tobago" + "name": "Trinidad and Tobago", + "phone_code": "1-868" }, { "code": "TN", - "name": "Tunisia" + "name": "Tunisia", + "phone_code": "216" }, { "code": "TR", - "name": "Turkey" + "name": "Turkey", + "phone_code": "90" }, { "code": "TM", - "name": "Turkmenistan" + "name": "Turkmenistan", + "phone_code": "993" }, { "code": "TC", - "name": "Turks and Caicos Islands" + "name": "Turks and Caicos Islands", + "phone_code": "1-649" }, { "code": "TV", - "name": "Tuvalu" + "name": "Tuvalu", + "phone_code": "688" }, { "code": "VI", - "name": "U.S. Virgin Islands" + "name": "U.S. Virgin Islands", + "phone_code": "1-340" }, { "code": "UG", - "name": "Uganda" + "name": "Uganda", + "phone_code": "256" }, { "code": "UA", - "name": "Ukraine" + "name": "Ukraine", + "phone_code": "380" }, { "code": "AE", - "name": "United Arab Emirates" + "name": "United Arab Emirates", + "phone_code": "971" }, { "code": "GB", - "name": "United Kingdom" + "name": "United Kingdom", + "phone_code": "44" }, { "code": "US", - "name": "United States" + "name": "United States", + "phone_code": "1" }, { "code": "UM", - "name": "United States Minor Outlying Islands" + "name": "United States Minor Outlying Islands", + "phone_code": "1" }, { "code": "UY", - "name": "Uruguay" + "name": "Uruguay", + "phone_code": "598" }, { "code": "UZ", - "name": "Uzbekistan" + "name": "Uzbekistan", + "phone_code": "998" }, { "code": "VU", - "name": "Vanuatu" + "name": "Vanuatu", + "phone_code": "678" }, { "code": "VA", - "name": "Vatican" + "name": "Vatican", + "phone_code": "379" }, { "code": "VE", - "name": "Venezuela" + "name": "Venezuela", + "phone_code": "58" }, { "code": "VN", - "name": "Vietnam" + "name": "Vietnam", + "phone_code": "84" }, { "code": "WF", - "name": "Wallis and Futuna" + "name": "Wallis and Futuna", + "phone_code": "681" }, { "code": "EH", - "name": "Western Sahara" + "name": "Western Sahara", + "phone_code": "212" }, { "code": "YE", - "name": "Yemen" + "name": "Yemen", + "phone_code": "967" }, { "code": "ZM", - "name": "Zambia" + "name": "Zambia", + "phone_code": "260" }, { "code": "ZW", - "name": "Zimbabwe" + "name": "Zimbabwe", + "phone_code": "263" } ] diff --git a/apps/www/data/Footer.json b/apps/www/data/Footer.json index cd224f9b182..bc567325dd5 100644 --- a/apps/www/data/Footer.json +++ b/apps/www/data/Footer.json @@ -62,6 +62,10 @@ { "text": "DPA", "url": "/legal/dpa" + }, + { + "text": "SOC2", + "url": "/legal/soc2" } ] }, diff --git a/apps/www/data/blog/PostgresFTSComparison.js b/apps/www/data/blog/PostgresFTSComparison.js new file mode 100644 index 00000000000..29c9079e715 --- /dev/null +++ b/apps/www/data/blog/PostgresFTSComparison.js @@ -0,0 +1,289 @@ +const latency = [ + { + query: 'awakening', + meilisearch: 3.63, + opensearch: 9.84, + pg: 1.93, + 'sqlite-disk': 0.3, + 'sqlite-mem': 0.24, + typesense: 2.07, + }, + + { + query: 'comedy', + meilisearch: 3.46, + opensearch: 40.1, + pg: 3.55, + 'sqlite-disk': 4.25, + 'sqlite-mem': 2.91, + typesense: 3.14, + }, + + { + query: 'love', + meilisearch: 12.4, + opensearch: 139.0, + pg: 15.3, + 'sqlite-disk': 27.7, + 'sqlite-mem': 13.4, + typesense: 30.6, + }, + + { + query: 'romance', + meilisearch: 3.05, + opensearch: 23.9, + pg: 2.14, + 'sqlite-disk': 1.97, + 'sqlite-mem': 1.43, + typesense: 2.68, + }, + + { + query: 'spy', + meilisearch: 3.57, + opensearch: 14.1, + pg: 1.78, + 'sqlite-disk': 0.92, + 'sqlite-mem': 0.64, + typesense: 3.78, + }, + + { + query: 'superhero', + meilisearch: 4.82, + opensearch: 112.0, + pg: 3.68, + 'sqlite-disk': 0.68, + 'sqlite-mem': 0.39, + typesense: 3.99, + }, + + { + query: 'superhero', + meilisearch: 4.39, + opensearch: 12.6, + pg: 1.59, + 'sqlite-disk': 0.52, + 'sqlite-mem': 0.24, + typesense: 2.09, + }, + + { + query: 'superman', + meilisearch: 3.45, + opensearch: 11.4, + pg: 1.24, + 'sqlite-disk': 0.36, + 'sqlite-mem': 0.19, + typesense: 2.71, + }, + + { + query: 'suprman', + meilisearch: 2.69, + opensearch: 6.78, + pg: 1.0, + 'sqlite-disk': 0.08, + 'sqlite-mem': 0.06, + typesense: 2.83, + }, + + { + query: 'worldwar', + meilisearch: 8.53, + opensearch: 149.0, + pg: 2.94, + 'sqlite-disk': 5.02, + 'sqlite-mem': 2.93, + typesense: 3.26, + }, +] + +const results = [ + { + query: 'awakening', + meilisearch: 15, + opensearch: 32, + pg: 210, + 'sqlite-disk': 63, + 'sqlite-mem': 63, + typesense: 14, + }, + { + query: 'comedy', + meilisearch: 67, + opensearch: 756, + pg: 1213, + 'sqlite-disk': 1220, + 'sqlite-mem': 1220, + typesense: 55, + }, + { + query: 'love', + meilisearch: 812, + opensearch: 3036, + pg: 5417, + 'sqlite-disk': 4691, + 'sqlite-mem': 4691, + typesense: 745, + }, + { + query: 'romance', + meilisearch: 35, + opensearch: 383, + pg: 630, + 'sqlite-disk': 554, + 'sqlite-mem': 554, + typesense: 34, + }, + { + query: 'spy', + meilisearch: 47, + opensearch: 168, + pg: 349, + 'sqlite-disk': 241, + 'sqlite-mem': 241, + typesense: 47, + }, + { + query: 'superhero', + meilisearch: 56, + opensearch: 431, + pg: 34, + 'sqlite-disk': 20, + 'sqlite-mem': 20, + typesense: 8, + }, + { + query: 'superhero', + meilisearch: 14, + opensearch: 45, + pg: 86, + 'sqlite-disk': 67, + 'sqlite-mem': 67, + typesense: 8, + }, + { + query: 'superman', + meilisearch: 41, + opensearch: 25, + pg: 47, + 'sqlite-disk': 47, + 'sqlite-mem': 47, + typesense: 28, + }, + { + query: 'suprman', + meilisearch: 29, + opensearch: 0, + pg: 0, + 'sqlite-disk': 0, + 'sqlite-mem': 0, + typesense: 28, + }, + { + query: 'worldwar', + meilisearch: 316, + opensearch: 3805, + pg: 834, + 'sqlite-disk': 781, + 'sqlite-mem': 781, + typesense: 11, + }, +] + +const avg_latency = [ + { + query: 'awakening', + meilisearch: 0.24, + opensearch: 0.31, + pg: 0.01, + 'sqlite-disk': 0.0, + 'sqlite-mem': 0.0, + typesense: 0.15, + }, + { + query: 'comedy', + meilisearch: 0.05, + opensearch: 0.05, + pg: 0.0, + 'sqlite-disk': 0.0, + 'sqlite-mem': 0.0, + typesense: 0.06, + }, + { + query: 'love', + meilisearch: 0.02, + opensearch: 0.05, + pg: 0.0, + 'sqlite-disk': 0.01, + 'sqlite-mem': 0.0, + typesense: 0.04, + }, + { + query: 'romance', + meilisearch: 0.09, + opensearch: 0.06, + pg: 0.0, + 'sqlite-disk': 0.0, + 'sqlite-mem': 0.0, + typesense: 0.08, + }, + { + query: 'spy', + meilisearch: 0.08, + opensearch: 0.08, + pg: 0.01, + 'sqlite-disk': 0.0, + 'sqlite-mem': 0.0, + typesense: 0.08, + }, + { + query: 'superhero', + meilisearch: 0.09, + opensearch: 0.26, + pg: 0.11, + 'sqlite-disk': 0.03, + 'sqlite-mem': 0.02, + typesense: 0.5, + }, + { + query: 'superhero', + meilisearch: 0.31, + opensearch: 0.28, + pg: 0.02, + 'sqlite-disk': 0.01, + 'sqlite-mem': 0.0, + typesense: 0.26, + }, + { + query: 'superman', + meilisearch: 0.08, + opensearch: 0.45, + pg: 0.03, + 'sqlite-disk': 0.01, + 'sqlite-mem': 0.0, + typesense: 0.1, + }, + { + query: 'suprman', + meilisearch: 0.09, + opensearch: undefined, + pg: undefined, + 'sqlite-disk': undefined, + 'sqlite-mem': undefined, + typesense: 0.1, + }, + { + query: 'worldwar', + meilisearch: 0.03, + opensearch: 0.04, + pg: 0.0, + 'sqlite-disk': 0.01, + 'sqlite-mem': 0.0, + typesense: 0.3, + }, +] + +export { latency, results, avg_latency } diff --git a/apps/www/lib/mdx/mdxComponents.tsx b/apps/www/lib/mdx/mdxComponents.tsx index 692ad708325..3f2f1762858 100644 --- a/apps/www/lib/mdx/mdxComponents.tsx +++ b/apps/www/lib/mdx/mdxComponents.tsx @@ -3,6 +3,7 @@ import Avatar from '~/components/Avatar' import CodeBlock from '~/components/CodeBlock/CodeBlock' import ImageGrid from '~/components/ImageGrid' import Quote from '~/components/Quote' +import Chart from '~/components/Charts/PGCharts' // import all components used in blog articles here // to do: move this into a helper/utils, it is used elsewhere @@ -14,6 +15,9 @@ export default function mdxComponents(type?: 'blog' | 'lp' | undefined) { CodeBlock, Quote, Avatar, + PGChart: (props: any) => { + return + }, pre: (props: any) => { if (props.className !== ignoreClass) { return diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 97e6e3bfc04..03cf6382e91 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1415,4 +1415,50 @@ module.exports = [ // source: '/docs/reference/javascript/auth-api-updateuserbyid', // destination: '/docs/reference/javascript/auth-admin-updateuserbyid', // }, + + // v1 to v2 redirects + + // signIn method is now split into signInWithPassword ,signInWithPasswordless ,signInWithOAuth + // send traffic to v1 docs instead + { + permanent: true, + source: '/docs/reference/javascript/auth-signin', + destination: '/docs/reference/javascript/v1/auth-signin', + }, + // auth.session renamed to auth.getSession + // send to new v2 docs version + { + permanent: true, + source: '/docs/reference/javascript/auth-session', + destination: '/docs/reference/javascript/auth-getsession', + }, + // Removed sendMobileOTP in favor of signInWithOtp + // send traffic to new v2 docs instead + { + permanent: true, + source: '/docs/reference/javascript/auth-api-sendmobileotp', + destination: '/docs/reference/javascript/auth-signinwithotp', + }, + // Replaced update with updateUser + { + permanent: true, + source: '/docs/reference/javascript/auth-update', + destination: '/docs/reference/javascript/auth-updateuser', + }, + // realtime methods been replaced with new names + { + permanent: true, + source: '/docs/reference/javascript/removesubscription', + destination: '/docs/reference/javascript/v1/removesubscription', + }, + { + permanent: true, + source: '/docs/reference/javascript/removeallsubscriptions', + destination: '/docs/reference/javascript/v1/removeallsubscriptions', + }, + { + permanent: true, + source: '/docs/reference/javascript/getsubscriptions', + destination: '/docs/reference/javascript/v1/getsubscriptions', + }, ] diff --git a/apps/www/package.json b/apps/www/package.json index cf9c934de71..058d02f2861 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -40,6 +40,7 @@ "react-syntax-highlighter": "^15.5.0", "react-tooltip": "^4.2.17", "react-transition-group": "^4.4.1", + "recharts": "^2.1.15", "rehype-slug": "^5.0.1", "remark": "^13.0.0", "remark-gfm": "^3.0.1", diff --git a/apps/www/pages/legal/dpa.tsx b/apps/www/pages/legal/dpa.tsx index b155a771445..ad9ecd2b3d4 100644 --- a/apps/www/pages/legal/dpa.tsx +++ b/apps/www/pages/legal/dpa.tsx @@ -1,10 +1,40 @@ -import { Button } from '@supabase/ui' -import CTABanner from 'components/CTABanner/index' +import * as Yup from 'yup' import Link from 'next/link' +import { useState } from 'react' +import { Button, Form, IconDownload, Input } from '@supabase/ui' + +import supabase from '~/lib/supabase' +import CTABanner from 'components/CTABanner/index' import Layout from '~/components/Layouts/Default' import SectionContainer from '~/components/Layouts/SectionContainer' const DPA = () => { + const [email, setEmail] = useState('') + const [error, setError] = useState() + const [formSubmitted, setFormSubmitted] = useState(false) + + const INITIAL_VALUES = { email: '' } + + const FormSchema = Yup.object().shape({ + email: Yup.string().email('Invalid email').required('Required'), + }) + + const handleFormSubmit = async (values: typeof INITIAL_VALUES, { resetForm }: any) => { + try { + setError(undefined) + const { error } = await supabase + .from('dpa_downloads') + .insert([{ contact_email: values.email, document: 'dpa' }]) + + if (error) throw error + + resetForm() + setFormSubmitted(true) + window.open('https://supabase.com/downloads/docs/Supabase+DPA+220503.pdf', '_blank') + } catch (error: any) { + setError(error.message) + } + } return ( <> @@ -19,14 +49,52 @@ const DPA = () => { ("DPA").

-

You can download the latest DPA document through our security portal.

-
- - - -
+

+ You can download the latest DPA document through our{' '} + security portal, or by + submitting your email here. +

+ + {formSubmitted ? ( +

+ Thank you for your submission! A new tab should have opened with the DPA + document +

+ ) : ( +
+ {({ isSubmitting }: any) => ( + <> + setEmail(e.target.value)} + type="email" + name="email" + id="email" + required + descriptionText="We only keep a record of your email so we can update you when the document has been updated." + placeholder="Your email address" + error={error} + actions={ + + } + /> + {error &&

{error}

} + + )} +
+ )}
@@ -36,5 +104,4 @@ const DPA = () => { ) } - export default DPA diff --git a/apps/www/pages/legal/soc2.tsx b/apps/www/pages/legal/soc2.tsx new file mode 100644 index 00000000000..c58ebe4dfef --- /dev/null +++ b/apps/www/pages/legal/soc2.tsx @@ -0,0 +1,36 @@ +import Link from 'next/link' +import CTABanner from 'components/CTABanner/index' +import Layout from '~/components/Layouts/Default' +import SectionContainer from '~/components/Layouts/SectionContainer' +import SOC2RequestForm from '~/components/SOC2RequestForm' + +const SOC2 = () => { + return ( + + +
+
+
+

SOC2

+

+ As a database company, being SOC2 compliant is important when handling sensitive + customer data. Supabase is currently SOC2 Type 1 compliant and we're also working on + getting certified for SOC2 Type 2 and HIPAA next. +

+ +

+ You can request for our latest SOC 2 document either through our{' '} + security portal, or by submitting + your request here. +

+ + +
+
+
+ + + + ) +} +export default SOC2 diff --git a/apps/www/public/downloads/docs/Supabase+DPA+220503.pdf b/apps/www/public/downloads/docs/Supabase+DPA+220503.pdf new file mode 100644 index 00000000000..5f2492f04a1 Binary files /dev/null and b/apps/www/public/downloads/docs/Supabase+DPA+220503.pdf differ diff --git a/apps/www/public/images/blog/postgres-fts-vs-the-rest/postgres-full-text-search.jpg b/apps/www/public/images/blog/postgres-fts-vs-the-rest/postgres-full-text-search.jpg new file mode 100644 index 00000000000..8cdda12a681 Binary files /dev/null and b/apps/www/public/images/blog/postgres-fts-vs-the-rest/postgres-full-text-search.jpg differ diff --git a/apps/www/public/rss.xml b/apps/www/public/rss.xml index f0910002bdd..68512a51698 100644 --- a/apps/www/public/rss.xml +++ b/apps/www/public/rss.xml @@ -5,9 +5,23 @@ https://supabase.com Latest news from Supabase en - Sun, 02 Oct 2022 16:04:00 +0000 + Tue, 11 Oct 2022 16:04:00 +0000 + https://supabase.com/blog/postgres-full-text-search-vs-the-rest + Postgres FTS vs the rest + https://supabase.com/blog/postgres-full-text-search-vs-the-rest + Comparing one of the most popular Postgres features against alternatives + Tue, 11 Oct 2022 16:04:00 +0000 + + + https://supabase.com/blog/supabase-beta-update-september-2022 + Supabase Beta September 2022 + https://supabase.com/blog/supabase-beta-update-september-2022 + We were too focused on clearing out the backlog so we didn't ship anything new last month... or did we?! + Tue, 04 Oct 2022 16:04:00 +0000 + + https://supabase.com/blog/postgres-wasm Postgres WASM by Snaplet and Supabase https://supabase.com/blog/postgres-wasm diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css index d9057e07a0d..0770adef451 100644 --- a/apps/www/styles/index.css +++ b/apps/www/styles/index.css @@ -420,3 +420,9 @@ launch week --rotate: 360deg; } } + +/* recharts */ + +.recharts-surface { + overflow: visible; +} diff --git a/apps/www/supabase/functions/hubspot-notification/index.ts b/apps/www/supabase/functions/hubspot-notification/index.ts index 00fd315ed26..7cb06314695 100644 --- a/apps/www/supabase/functions/hubspot-notification/index.ts +++ b/apps/www/supabase/functions/hubspot-notification/index.ts @@ -4,6 +4,8 @@ const FUNCTION_SECRET = Deno.env.get('FUNCTION_SECRET') const HUBSPOT_PORTAL = Deno.env.get('HUBSPOT_PORTAL') const PARTNER_FORM_ID = Deno.env.get('PARTNER_FORM_ID') const ENTERPRISE_FORM_ID = Deno.env.get('ENTERPRISE_FORM_ID') +const DPA_FORM_ID = Deno.env.get('DPA_FORM_ID') +const SOC2_FORM_ID = Deno.env.get('SOC2_FORM_ID') serve(async (req) => { const requestSecret = req.headers.get('x-function-secret') @@ -27,25 +29,32 @@ serve(async (req) => { const website = input.record.website const partner_gallery_type = input.record.type - let formData: object = { - supabase_table_id, - country, - form_note, - company, - company_size, - email, - phone, - lastName, - firstName, - } + let formData: object = { email } - if (input.table === 'partner_contacts') { - formData = { - ...formData, - jobtitle, - website, - partner_gallery_type, - } + switch (input.table) { + case 'partner_contacts': + formData = { ...formData, jobtitle, website, partner_gallery_type } + break + case 'soc2_requests': + case 'enterprise_contacts': + formData = { + ...formData, + supabase_table_id, + country, + form_note, + company, + company_size, + email, + phone, + lastName, + firstName, + } + break + case 'dpa_downloads': + formData = { ...formData } + break + default: + break } const fields: { objectTypeId: '0-1'; name: string; value: string }[] = [] @@ -53,7 +62,14 @@ serve(async (req) => { fields.push({ objectTypeId: '0-1', name: key, value: value || 'NOT_PROVIDED' }) } - const formId = input.table === 'partner_contacts' ? PARTNER_FORM_ID : ENTERPRISE_FORM_ID + const formId = + input.table === 'partner_contacts' + ? PARTNER_FORM_ID + : input.table === 'dpa_downloads' + ? DPA_FORM_ID + : input.table === 'soc2_requests' + ? SOC2_FORM_ID + : ENTERPRISE_FORM_ID // Using HubSpot's submit data to a form API // https://legacydocs.hubspot.com/docs/methods/forms/submit_form diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index af69fb28459..8c14bd4d2b8 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -38,6 +38,8 @@ services: # https://github.com/supabase/cli/issues/14 KONG_DNS_ORDER: LAST,A,CNAME KONG_PLUGINS: request-transformer,cors,key-auth,acl + KONG_NGINX_PROXY_PROXY_BUFFER_SIZE: 160k + KONG_NGINX_PROXY_PROXY_BUFFERS: 64 160k volumes: - ./volumes/api:/var/lib/kong diff --git a/examples/auth/javascript-auth/index.html b/examples/auth/javascript-auth/index.html index 8cd11003fed..8ccb00f93f6 100644 --- a/examples/auth/javascript-auth/index.html +++ b/examples/auth/javascript-auth/index.html @@ -2,7 +2,7 @@ - + diff --git a/package-lock.json b/package-lock.json index cb3b9214a92..ab27b7d1d4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -144,6 +144,7 @@ "react-syntax-highlighter": "^15.5.0", "react-tooltip": "^4.2.17", "react-transition-group": "^4.4.1", + "recharts": "^2.1.15", "rehype-slug": "^5.0.1", "remark": "^13.0.0", "remark-gfm": "^3.0.1", @@ -401,6 +402,47 @@ "node": ">= 8.3" } }, + "apps/www/node_modules/recharts": { + "version": "2.1.15", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.1.15.tgz", + "integrity": "sha512-16VMAvrsdqkEe7sT9uyJ1F+OZzrC6+5eW+pVSU04SVO6O5Nr5lY78h/uKMjsZJTN0nfOfgV7YfHZcivtqgPU9g==", + "dependencies": { + "@types/d3-interpolate": "^2.0.0", + "@types/d3-scale": "^3.0.0", + "@types/d3-shape": "^2.0.0", + "classnames": "^2.2.5", + "d3-interpolate": "^2.0.0", + "d3-scale": "^3.0.0", + "d3-shape": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.19", + "react-is": "^16.10.2", + "react-resize-detector": "^7.1.2", + "react-smooth": "^2.0.1", + "recharts-scale": "^0.4.4", + "reduce-css-calc": "^2.1.8" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "prop-types": "^15.6.0", + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "apps/www/node_modules/recharts/node_modules/react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "dependencies": { + "lodash": "^4.17.21" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "apps/www/node_modules/remark": { "version": "13.0.0", "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz", @@ -63831,6 +63873,7 @@ "react-syntax-highlighter": "^15.5.0", "react-tooltip": "^4.2.17", "react-transition-group": "^4.4.1", + "recharts": "^2.1.15", "rehype-slug": "^5.0.1", "remark": "^13.0.0", "remark-gfm": "^3.0.1", @@ -64017,6 +64060,37 @@ "react-is": "^16.12.0" } }, + "recharts": { + "version": "2.1.15", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.1.15.tgz", + "integrity": "sha512-16VMAvrsdqkEe7sT9uyJ1F+OZzrC6+5eW+pVSU04SVO6O5Nr5lY78h/uKMjsZJTN0nfOfgV7YfHZcivtqgPU9g==", + "requires": { + "@types/d3-interpolate": "^2.0.0", + "@types/d3-scale": "^3.0.0", + "@types/d3-shape": "^2.0.0", + "classnames": "^2.2.5", + "d3-interpolate": "^2.0.0", + "d3-scale": "^3.0.0", + "d3-shape": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.19", + "react-is": "^16.10.2", + "react-resize-detector": "^7.1.2", + "react-smooth": "^2.0.1", + "recharts-scale": "^0.4.4", + "reduce-css-calc": "^2.1.8" + }, + "dependencies": { + "react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "requires": { + "lodash": "^4.17.21" + } + } + } + }, "remark": { "version": "13.0.0", "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz", diff --git a/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx b/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx index a4e22f5b8c3..52672ba6421 100644 --- a/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx +++ b/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx @@ -33,10 +33,10 @@ const SchemaTable: FC = ({ filterString, schema, editTrigger, deleteTrigg Function - + Events - + } body={ diff --git a/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx b/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx index e8c2049224a..f2accf622c3 100644 --- a/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx +++ b/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx @@ -49,9 +49,9 @@ const TriggerList: FC = ({ filterString, schema, editTrigger, deleteTrigg
-
+
{x.events.map((event: string) => ( - {event} + {`${x.activation} ${event}`} ))}
diff --git a/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/studio/components/interfaces/Settings/Logs/Logs.constants.ts index d3a6d2de484..85dc9ba6f89 100644 --- a/studio/components/interfaces/Settings/Logs/Logs.constants.ts +++ b/studio/components/interfaces/Settings/Logs/Logs.constants.ts @@ -163,6 +163,7 @@ limit 100 }, { label: 'Error Count by User', + description: 'Count of errors by users', mode: 'custom', searchString: `select count(t.timestamp) as count, diff --git a/studio/components/ui/PageTelemetry.tsx b/studio/components/ui/PageTelemetry.tsx index fda1a5cee7c..966a886236f 100644 --- a/studio/components/ui/PageTelemetry.tsx +++ b/studio/components/ui/PageTelemetry.tsx @@ -1,7 +1,6 @@ import { useStore } from 'hooks' import { post } from 'lib/common/fetch' import { API_URL, IS_PLATFORM } from 'lib/constants' -import { isUndefined } from 'lodash' import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { FC, useEffect } from 'react' diff --git a/studio/pages/project/[ref]/logs-explorer/templates.tsx b/studio/pages/project/[ref]/logs-explorer/templates.tsx index e52d487cfd0..2f1df95616f 100644 --- a/studio/pages/project/[ref]/logs-explorer/templates.tsx +++ b/studio/pages/project/[ref]/logs-explorer/templates.tsx @@ -14,59 +14,61 @@ export const LogsTemplatesPage: NextPageWithLayout = () => { return (
- {TEMPLATES.filter((template) => template.mode === 'custom').map((template, i) => { - const [showPreview, setShowPreview] = useState(false) - return ( - -
- -
-
- } - containerHeightClassName="h-40" - linkHref={`/project/${ref}/logs-explorer?q=${encodeURI(template.searchString)}`} - description={template.description} - footer={ -
- - {template.searchString} - - } > -
+ } + containerHeightClassName="h-40" + linkHref={`/project/${ref}/logs-explorer?q=${encodeURI(template.searchString)}`} + description={template.description} + footer={ +
+ + {template.searchString} + + } > - Preview - - -
- } - /> - ) - })} + + +
+ } + /> + ) + })}
) diff --git a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx index 3ceb9e46087..b51f6d754f1 100644 --- a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx +++ b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx @@ -356,7 +356,8 @@ const EXTERNAL_PROVIDER_AZURE = { }, EXTERNAL_AZURE_SECRET: { // [TODO] Change docs - title: 'Secret ID', + title: 'Secret Value', + description: `Enter the data from Value, not the Secret ID. [Learn more](https://supabase.com/docs/guides/auth/auth-azure#obtain-a-secret-id)`, type: 'string', isSecret: true, }, diff --git a/studio/stores/jsonSchema/auth_gotrue_config.json b/studio/stores/jsonSchema/auth_gotrue_config.json index 22b97d4af6f..09e5bb3d4ed 100644 --- a/studio/stores/jsonSchema/auth_gotrue_config.json +++ b/studio/stores/jsonSchema/auth_gotrue_config.json @@ -113,7 +113,8 @@ }, "EXTERNAL_AZURE_SECRET": { "title": "Azure secret", - "type": "string" + "type": "string", + "help": "Enter the data from Value, not the Secret ID." }, "EXTERNAL_AZURE_URL": { "title": "Azure tenant URL",