## Description 🔖
[VIDEO](https://www.loom.com/share/5844476e527f4e1d9ec296bc3a4bb932)
This PR creates a Tabs component that wraps the Radix UI component.
## Solution and Design 🎨
The component accepts all the props of the Radix UI tab root component and a list of items that specify the label and the content of the tabs. The component can be used in a controlled way (e.g., the state of the tab is stored in the URL) or uncontrolled.
For styling radix ui states I've added this library: https://github.com/ecklf/tailwindcss-radix
## Review Setup 💻
Run storybook and look for Tabs component
## Review checklist. 📋
- [ ] stories work
- [ ] doc is clear
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5667
GitOrigin-RevId: 0e73ef1026d6673c3c2dd413b986fa8395abb1f6
Use this docker-compose file while running the connect DB cypress test
<details>
<summary>Docker-compose file</summary>
```yaml
version: '3.6'
services:
postgres:
image: postgres:12
restart: unless-stopped
ports:
- '5432:5432'
volumes:
- db_meta:/var/lib/postgresql/data
environment:
POSTGRES_PASSWORD: postgrespassword
postgres12:
image: postgres:12
restart: unless-stopped
ports:
- '4432:5432'
volumes:
- db_pg12_data:/var/lib/postgresql/data
environment:
POSTGRES_PASSWORD: postgrespassword
msserver:
image: 'mcr.microsoft.com/mssql/server:2019-latest'
ports:
- '1435:1435'
restart: unless-stopped
environment:
SA_PASSWORD: 'testPassword123'
ACCEPT_EULA: 'Y'
graphql-engine:
image: hasura/graphql-engine:v2.8.1
ports:
- '8080:8080'
depends_on:
- 'postgres'
restart: unless-stopped
environment:
HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
TEST_MSSQL_DATABASE_URL: DRIVER={ODBC Driver 17 for SQL Server};SERVER=msserver;Uid=SA;Pwd=testPassword123
## enable the console served by server
HASURA_GRAPHQL_ENABLE_CONSOLE: 'true' # set to "false" to disable console
## enable debugging mode. It is recommended to disable this in production
## HASURA_GRAPHQL_CONSOLE_ASSETS_DIR: /srv/console-assets
HASURA_GRAPHQL_DEV_MODE: 'true'
HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
## uncomment next line to set an admin secret
# HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
HASURA_GRAPHQL_ENABLE_REMOTE_SCHEMA_PERMISSIONS: 'true'
HASURA_GRAPHQL_EXPERIMENTAL_FEATURES: naming_convention
volumes:
db_pg12_data:
db_meta:
# Connect to second PG using env var DB2
# Connect to metadata PG using HASURA_GRAPHQL_METADATA_DATABASE_URL
# Connect to mssql server using connection string (not env)
# DRIVER={ODBC Driver 17 for SQL Server};SERVER=msserver;Uid=SA;Pwd=testPassword123
# PG 12 : postgres://postgres:postgrespassword@postgres12:5432/postgres
```
</details>
1. Here is the [Video](https://www.loom.com/share/bfe8b4da59ae48dca3fc9877b440c360) of the running connect db e2e test
2. We write test only for connect Postgres DB not for mssql because mssql container doesn't work on CI and on M1 laptops. Moreover, the value provided was low because we tested the same path Postgres (this was team agreement)
3. We installed @testing-library/cypress to leverage the same helper functions (we used `findByText` and `findByPlaceholderText`)
4. We used `withIn` to target a section on a page and find an element inside
5. We used a procedural approach and we added `cy.log` to improve the debugging of the test.
6. We created new helper function to test notifications -
`cy.expectSuccessNotification()`
`cy.expectSuccessNotificationWithTitle(title: string)`
`cy.expectSuccessNotificationWithMessage(message: string)`
`cy.expectErrorNotification()`
`cy.expectErrorNotificationWithTitle(title: string)`
`cy.expectErrorNotificationWithMessage(message: string)`
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4960
Co-authored-by: Luca Restagno <59067245+lucarestagno@users.noreply.github.com>
Co-authored-by: Brandon Simmons <210815+jberryman@users.noreply.github.com>
Co-authored-by: Samir Talwar <47582+SamirTalwar@users.noreply.github.com>
Co-authored-by: Divi <32202683+imperfect-fourth@users.noreply.github.com>
Co-authored-by: Karthikeyan Chinnakonda <15602904+codingkarthik@users.noreply.github.com>
Co-authored-by: Erik Magnusson <32518962+ejkkan@users.noreply.github.com>
Co-authored-by: Vishnu Bharathi <4211715+scriptnull@users.noreply.github.com>
Co-authored-by: Jesse Hallett <9622+hallettj@users.noreply.github.com>
Co-authored-by: Abby Sassel <3883855+sassela@users.noreply.github.com>
Co-authored-by: David Overton <7734777+dmoverton@users.noreply.github.com>
Co-authored-by: Daniel Chambers <1214352+daniel-chambers@users.noreply.github.com>
Co-authored-by: Lyndon Maydwell <92299+sordina@users.noreply.github.com>
Co-authored-by: paritosh-08 <85472423+paritosh-08@users.noreply.github.com>
Co-authored-by: Gil Mizrahi <8547573+soupi@users.noreply.github.com>
Co-authored-by: Benoit Ranque <25712958+BenoitRanque@users.noreply.github.com>
Co-authored-by: Daniel Harvey <4729125+danieljharvey@users.noreply.github.com>
Co-authored-by: Tom Harding <6302310+i-am-tom@users.noreply.github.com>
Co-authored-by: Solomon <24038+solomon-b@users.noreply.github.com>
Co-authored-by: Antoine Leblanc <1618949+nicuveo@users.noreply.github.com>
Co-authored-by: Evie Ciobanu <1017953+eviefp@users.noreply.github.com>
Co-authored-by: Vijay Prasanna <11921040+vijayprasanna13@users.noreply.github.com>
Co-authored-by: Naveen Naidu <30195193+Naveenaidu@users.noreply.github.com>
Co-authored-by: Abhijeet Khangarot <26903230+abhi40308@users.noreply.github.com>
Co-authored-by: Rob Dominguez <24390149+robertjdominguez@users.noreply.github.com>
Co-authored-by: Puru Gupta <32328846+purugupta99@users.noreply.github.com>
Co-authored-by: Daniele Cammareri <5709409+dancamma@users.noreply.github.com>
Co-authored-by: Marion Schleifer <5722022+marionschleifer@users.noreply.github.com>
GitOrigin-RevId: a50879ee790d3409c0b97c87a0e3d2b793c9ff37
