From 996a4154e155a680e90f102f3fa4879e7eb6eede Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Mon, 25 Dec 2023 12:51:48 +0530 Subject: [PATCH 01/10] feat: sdk compatibility table. --- v2/src/components/api/compatibility.ts | 11 +- v2/src/components/api/drivers.ts | 5 +- .../components/compatibility/index-remove.tsx | 597 ++++++++++++++++ v2/src/components/compatibility/index.tsx | 675 +++--------------- v2/src/components/compatibility/style.css | 163 ++--- 5 files changed, 753 insertions(+), 698 deletions(-) create mode 100644 v2/src/components/compatibility/index-remove.tsx diff --git a/v2/src/components/api/compatibility.ts b/v2/src/components/api/compatibility.ts index 28f05b5bc..940cefb1b 100644 --- a/v2/src/components/api/compatibility.ts +++ b/v2/src/components/api/compatibility.ts @@ -11,18 +11,13 @@ export type GetCompatibilityResponse = { driverToFrontend: { [key: string]: string[] }; }; -export async function getCompatibility( - planType: "FREE" | "COMMERCIAL", - driver: string, - plugin: string, - frontend: string -): Promise { +export async function getCompatibility(driver: string, frontend: string): Promise { let options: httpNetworking.GETRequestConfig = { timeout: 50000, params: { - planType, + planType: "FREE", + plugin: "postgresql", driver, - plugin, frontend } }; diff --git a/v2/src/components/api/drivers.ts b/v2/src/components/api/drivers.ts index 90bbba173..51e56b9c4 100644 --- a/v2/src/components/api/drivers.ts +++ b/v2/src/components/api/drivers.ts @@ -15,13 +15,12 @@ export type GetSupportedDriversResponse = { /** * Fetches a list of supported drivers in format {id: string, displayName: string} - * @param planType free or commercial */ -export default async function getSupportedDrivers(planType: any): Promise { +export default async function getSupportedDrivers(): Promise { let options: httpNetworking.GETRequestConfig = { timeout: 50000, params: { - planType: planType === "COMMERCIAL_TRIAL" ? "COMMERCIAL" : planType, + planType: "FREE", mode: "PRODUCTION" } }; diff --git a/v2/src/components/compatibility/index-remove.tsx b/v2/src/components/compatibility/index-remove.tsx new file mode 100644 index 000000000..1debe1329 --- /dev/null +++ b/v2/src/components/compatibility/index-remove.tsx @@ -0,0 +1,597 @@ +import * as React from "react"; + +import { getCompatibility, GetCompatibilityResponse } from "../api/compatibility"; +import getSupportedDrivers, { GetSupportedDriversResponse_Driver } from "../api/drivers"; +import getSupportedFrontends, { GetSupportedFrontendsResponse_Frontend } from "../api/frontends"; +import getSupportedPlugins, { GetSupportedPluginsResponse_Plugin } from "../api/plugins"; +import "./style.css"; + +type Props = {}; + +type State = { + isFetchingPageData: boolean; + isFetchingCompatibility: boolean; + isPageError: boolean; + plugins: GetSupportedPluginsResponse_Plugin[]; + drivers: GetSupportedDriversResponse_Driver[]; + frontends: GetSupportedFrontendsResponse_Frontend[]; + selectedPlugin: string; + selectedDriver: string; + selectedFrontend: string; + compatibilityData: GetCompatibilityResponse; + shouldShowCompatibility: boolean; +}; + +type Plan = "FREE" | "COMMERCIAL"; + +export default class CompatibilityMatrix extends React.PureComponent { + constructor(props: Props) { + super(props); + this.state = { + isFetchingPageData: true, + isFetchingCompatibility: true, + isPageError: false, + plugins: [], + drivers: [], + frontends: [], + selectedPlugin: "postgresql", + selectedDriver: "", + selectedFrontend: "", + compatibilityData: { + cores: [], + coreToDriver: {}, + coreToPlugin: {}, + driverToFrontend: {} + }, + shouldShowCompatibility: false + }; + } + + getCurrentPlanType = (): Plan => { + let isPro = window.location.href.includes("/pro/"); + + if (isPro) { + return "COMMERCIAL"; + } + + return "FREE"; + }; + + getFrameworkDropdown = () => { + return ( +
+
Select a backend SDK
+ + +
+ ); + }; + + getDatabaseDropdown = () => { + return ( +
+
Select a database
+ +
+ If using our managed service, please select PostgreSQL +
+ + +
+ ); + }; + + getFrontendDropdown = () => { + return ( +
+
Select a frontend SDK
+ + +
+ ); + }; + + getDivider = () => { + return ( +
+ ); + }; + + getTableHeader = (firstTitle: string, secondTitle: string, firstHoverText: string, secondHoverText: string) => { + return ( +
+
+
{firstTitle}
+
+ +
+
{secondTitle}
+
+
+ ); + }; + + getCoreToDriver = () => { + if (Object.keys(this.state.compatibilityData.coreToDriver).length === 0) { + return null; + } + const currentSelectedCore = this.state.selectedDriver; + let displayName = ""; + for (let i = 0; i < this.state.drivers.length; i++) { + const currentElement = this.state.drivers[i]; + if (currentElement.id === currentSelectedCore) { + displayName = currentElement.displayName; + } + } + + return ( +
+
+ {this.getTableHeader("supertokens-core", `${displayName}`, "", "")} + {Object.keys(this.state.compatibilityData.coreToDriver).map((key, index) => { + let current = this.state.compatibilityData.coreToDriver[key]; + let isLast = index === Object.keys(this.state.compatibilityData.coreToDriver).length - 1; + + return ( +
+
+ {key}.X +
+
+ {current.map((ver, index) => { + return ( + + {ver} + + ); + })} +
+
+ ); + })} +
+
+ ); + }; + + getCoreToPlugin = () => { + if (Object.keys(this.state.compatibilityData.coreToPlugin).length === 0) { + return null; + } + const currentSelectedPlugin = this.state.selectedPlugin; + let displayName = ""; + for (let i = 0; i < this.state.plugins.length; i++) { + const currentElement = this.state.plugins[i]; + if (currentElement.id === currentSelectedPlugin) { + displayName = currentElement.displayName; + } + } + + return ( +
+
+ {this.getTableHeader("SuperTokens core version", `${displayName} plugin version`, "", "")} + {Object.keys(this.state.compatibilityData.coreToPlugin).map((key, index) => { + let current = this.state.compatibilityData.coreToPlugin[key]; + let isLast = index === Object.keys(this.state.compatibilityData.coreToPlugin).length - 1; + + return ( +
+
+ {key}.X +
+
+ {current.map((ver, index) => { + return ( + + {ver} + + ); + })} +
+
+ ); + })} +
+
+ ); + }; + + getDriverToFrontend = () => { + if (Object.keys(this.state.compatibilityData.driverToFrontend).length === 0) { + return null; + } + const currentSelectedFrontendSdk = this.state.selectedFrontend; + let displayName = ""; + for (let i = 0; i < this.state.frontends.length; i++) { + const currentElement = this.state.frontends[i]; + if (currentElement.id === currentSelectedFrontendSdk) { + displayName = currentElement.displayName; + } + } + + let sdkDisplayName = ""; + for (const item of this.state.drivers) { + if (item.id === this.state.selectedDriver) { + sdkDisplayName = item.displayName; + } + } + + return ( +
+
+ {this.getTableHeader(`${sdkDisplayName}`, `${displayName}`, "", "")} + {Object.keys(this.state.compatibilityData.driverToFrontend).map((key, index) => { + let current = this.state.compatibilityData.driverToFrontend[key]; + let isLast = index === Object.keys(this.state.compatibilityData.driverToFrontend).length - 1; + return ( +
+
+ {key}.X +
+
+ {current.map((ver, index) => { + return ( + + {ver} + + ); + })} +
+
+ ); + })} +
+
+ ); + }; + + getCompatibilityContent = () => { + if (this.state.isFetchingCompatibility) { + return ( +
+
+
+ ); + } + + return ( +
+ {/* {this.getCoreToPlugin()} */} + {/* {this.getDivider()} */} + {this.getCoreToDriver()} + {this.getDivider()} + {this.getDriverToFrontend()} +
+ ); + }; + + render() { + if (this.state.isFetchingPageData) { + return ( +
+
+
+
+
+ ); + } + + if (this.state.isPageError) { + return ( +
+
+
+
+ Something went wrong +
+ +
+ Try again +
+
+
+
+ ); + } + + return ( +
+ {this.getFrameworkDropdown()} + {/* {this.getDatabaseDropdown()} */} + {this.getFrontendDropdown()} + + {this.state.shouldShowCompatibility && this.getDivider()} + + {this.state.shouldShowCompatibility && this.getCompatibilityContent()} +
+ ); + } + + componentDidMount() { + this.fetchPageData(); + } + + fetchPageData = async () => { + try { + let planType: Plan = this.getCurrentPlanType(); + + let pluginsResponse = await getSupportedPlugins(planType); + let driversResponse = await getSupportedDrivers(); + let frontendsResponse = await getSupportedFrontends(); + + let plugins = pluginsResponse.plugins; + let drivers = driversResponse.drivers; + let frontends = frontendsResponse.frontends; + + this.setState(oldState => ({ + ...oldState, + isFetchingPageData: false, + isPageError: false, + plugins: [...plugins], + drivers: [...drivers], + frontends: [...frontends] + })); + } catch (e) { + this.setState(oldState => ({ + ...oldState, + isFetchingPageData: false, + isPageError: true + })); + } + }; + + onPageErrorRetryClicked = () => { + window.location.reload(); + }; + + onPluginSelected = (event: React.ChangeEvent) => { + let value = event.target.value; + this.setState( + oldState => ({ + ...oldState, + selectedPlugin: value + }), + () => { + this.fetchCompatibilityIfNeeded(); + } + ); + }; + + onDriverSelected = (event: React.ChangeEvent) => { + let value = event.target.value; + this.setState( + oldState => ({ + ...oldState, + selectedDriver: value + }), + () => { + this.fetchCompatibilityIfNeeded(); + } + ); + }; + + onFrontendSelected = (event: React.ChangeEvent) => { + let value = event.target.value; + this.setState( + oldState => ({ + ...oldState, + selectedFrontend: value + }), + () => { + this.fetchCompatibilityIfNeeded(); + } + ); + }; + + fetchCompatibilityIfNeeded = async () => { + if ( + this.state.selectedDriver === "" || + this.state.selectedFrontend === "" || + this.state.selectedPlugin === "" + ) { + return; + } + + this.setState(oldState => ({ + ...oldState, + isFetchingCompatibility: true, + shouldShowCompatibility: true + })); + + try { + const compatibilityResponse = await getCompatibility( + this.state.selectedDriver, + this.state.selectedFrontend + ); + this.setState(oldState => ({ + ...oldState, + isFetchingCompatibility: false, + compatibilityData: { ...compatibilityResponse } + })); + } catch (e) { + this.setState(oldState => ({ + ...oldState, + isFetchingCompatibility: false, + shouldShowCompatibility: false, + isPageError: true + })); + } + }; +} diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx index 3ad2e3707..5248e33e5 100644 --- a/v2/src/components/compatibility/index.tsx +++ b/v2/src/components/compatibility/index.tsx @@ -1,613 +1,110 @@ -import * as React from 'react'; - -import { getCompatibility, GetCompatibilityResponse } from '../api/compatibility'; -import getSupportedDrivers, { GetSupportedDriversResponse_Driver } from '../api/drivers'; -import getSupportedFrontends, { GetSupportedFrontendsResponse_Frontend } from '../api/frontends'; -import getSupportedPlugins, { GetSupportedPluginsResponse_Plugin } from '../api/plugins'; import "./style.css"; -type Props = { +import React, { useEffect, useState } from "react"; -}; +import getSupportedFrontends from "../api/frontends"; +import getSupportedDrivers from "../api/drivers"; +import { GetCompatibilityResponse, getCompatibility } from "../api/compatibility"; -type State = { - isFetchingPageData: boolean, - isFetchingCompatibility: boolean, - isPageError: boolean, - plugins: GetSupportedPluginsResponse_Plugin[], - drivers: GetSupportedDriversResponse_Driver[], - frontends: GetSupportedFrontendsResponse_Frontend[], - selectedPlugin: string, - selectedDriver: string, - selectedFrontend: string, - compatibilityData: GetCompatibilityResponse, - shouldShowCompatibility: boolean, +type SdkType = { + id: string; + displayName: string; }; -type Plan = "FREE" | "COMMERCIAL"; - -export default class CompatibilityMatrix extends React.PureComponent { - constructor(props: Props) { - super(props); - this.state = { - isFetchingPageData: true, - isFetchingCompatibility: true, - isPageError: false, - plugins: [], - drivers: [], - frontends: [], - selectedPlugin: "postgresql", - selectedDriver: "", - selectedFrontend: "", - compatibilityData: { - cores: [], - coreToDriver: {}, - coreToPlugin: {}, - driverToFrontend: {}, - }, - shouldShowCompatibility: false, - }; - } +export default function CompatibilityMatrix() { + const [supportedFrontendSdks, setSupportedFrontendSdks] = useState(undefined); + const [supportedBackendSdks, setSupportedBackedSdks] = useState(undefined); - getCurrentPlanType = (): Plan => { - let isPro = window.location.href.includes("/pro/"); - if (isPro) { - return "COMMERCIAL"; - } - - return "FREE"; - } + const [selectedFrontendSdk, setSelectedFrontendSdk] = useState(undefined); + const [selectedBackendSdk, setSelectedBackendnSdk] = useState(undefined); - getFrameworkDropdown = () => { - return ( -
-
- Select a backend SDK -
+ const [compatibilityMatrix, setCompatibilityMatrix] = useState(undefined) - -
- ); - } - - getDatabaseDropdown = () => { - return ( -
-
- Select a database -
- -
- If using our managed service, please select PostgreSQL -
- -
- ); - } - - getFrontendDropdown = () => { - return ( -
-
- Select a frontend SDK -
- - -
- ); - } - - getDivider = () => { - return ( -
- -
- ); - } - - getTableHeader = (firstTitle: string, secondTitle: string, firstHoverText: string, secondHoverText: string) => { - return ( -
-
-
- {firstTitle} -
-
- -
-
- {secondTitle} -
-
-
- ); - } - - getCoreToDriver = () => { - if (Object.keys(this.state.compatibilityData.coreToDriver).length === 0) { - return null; - } - const currentSelectedCore = this.state.selectedDriver - let displayName = '' - for (let i = 0; i < this.state.drivers.length; i++) { - const currentElement = this.state.drivers[i] - if (currentElement.id === currentSelectedCore) { - displayName = currentElement.displayName + useEffect(() => { + async function getSupportedSdks() { + try { + const supportedFrotendsResponse = await getSupportedFrontends(); + const supportedBackendsResponse = await getSupportedDrivers(); + setSupportedFrontendSdks(supportedFrotendsResponse.frontends); + setSupportedBackedSdks(supportedBackendsResponse.drivers); + } catch (error) { + alert("Something went wrong, Please try again!"); } } - - return ( -
-
- {this.getTableHeader("supertokens-core", `${displayName}`, "", "")} - { - Object.keys(this.state.compatibilityData.coreToDriver).map((key, index) => { - let current = this.state.compatibilityData.coreToDriver[key]; - let isLast = index === Object.keys(this.state.compatibilityData.coreToDriver).length - 1; - - return ( -
-
- {key}.X -
-
- { - current.map((ver, index) => { - return ( - - {ver} - - ); - }) - } -
-
- ); - }) - } -
-
- ); - } - - getCoreToPlugin = () => { - if (Object.keys(this.state.compatibilityData.coreToPlugin).length === 0) { - return null; - } - const currentSelectedPlugin = this.state.selectedPlugin - let displayName = '' - for (let i = 0; i < this.state.plugins.length; i++) { - const currentElement = this.state.plugins[i] - if (currentElement.id === currentSelectedPlugin) { - displayName = currentElement.displayName + getSupportedSdks(); + }, []); + + useEffect(() => { + async function getCompatibilityMatrix() { + if (selectedBackendSdk !== undefined && selectedFrontendSdk !== undefined) { + try { + const response = await getCompatibility(selectedBackendSdk, selectedFrontendSdk) + setCompatibilityMatrix(response) + } catch (error) { + alert("Something went wrong, Please try again!") + } } } - - return ( -
-
- {this.getTableHeader("SuperTokens core version", `${displayName} plugin version`, "", "")} - { - Object.keys(this.state.compatibilityData.coreToPlugin).map((key, index) => { - let current = this.state.compatibilityData.coreToPlugin[key]; - let isLast = index === Object.keys(this.state.compatibilityData.coreToPlugin).length - 1; - - return ( -
-
- {key}.X -
-
- { - current.map((ver, index) => { - return ( - - {ver} - - ); - }) - } -
-
- ); - }) - } + getCompatibilityMatrix() + }, [selectedBackendSdk, selectedFrontendSdk]) + + console.log({ compatibilityMatrix }) + return ( +
+
+
+ Select SDK
-
- ); - } - - getDriverToFrontend = () => { - if (Object.keys(this.state.compatibilityData.driverToFrontend).length === 0) { - return null; - } - const currentSelectedFrontendSdk = this.state.selectedFrontend - let displayName = '' - for (let i = 0; i < this.state.frontends.length; i++) { - const currentElement = this.state.frontends[i] - if (currentElement.id === currentSelectedFrontendSdk) { - displayName = currentElement.displayName - } - } - - let sdkDisplayName = '' - for (const item of this.state.drivers) { - if (item.id === this.state.selectedDriver) { - sdkDisplayName = item.displayName - } - } - - return ( -
-
- {this.getTableHeader(`${sdkDisplayName}`, `${displayName}`, "", "")} - { - Object.keys(this.state.compatibilityData.driverToFrontend).map((key, index) => { - let current = this.state.compatibilityData.driverToFrontend[key]; - let isLast = index === Object.keys(this.state.compatibilityData.driverToFrontend).length - 1; - return ( -
-
- {key}.X -
-
- { - current.map((ver, index) => { - return ( - - {ver} - - ); - }) - } -
-
- ); - }) - } +
+
+
+ Backend SDK + +
+
+ Frontend SDK + +
+
- ); - } +
+
+
+ supertokens-core +
+
+ +
- getCompatibilityContent = () => { - if (this.state.isFetchingCompatibility) { - return ( -
-
- ); - } - - return ( -
- {/* {this.getCoreToPlugin()} */} - {/* {this.getDivider()} */} - {this.getCoreToDriver()} - {this.getDivider()} - {this.getDriverToFrontend()} -
- ); - } - - render() { - if (this.state.isFetchingPageData) { - return ( -
-
-
+
+
+ supertokens-node
-
- ); - } - - if (this.state.isPageError) { - return ( -
-
-
-
- Something went wrong -
- -
- Try again -
-
+
+
- ); - } - - return ( -
- {this.getFrameworkDropdown()} - {/* {this.getDatabaseDropdown()} */} - {this.getFrontendDropdown()} - - { - this.state.shouldShowCompatibility && - this.getDivider() - } - - { - this.state.shouldShowCompatibility && - this.getCompatibilityContent() - }
- ); - } - - componentDidMount() { - this.fetchPageData(); - } - - fetchPageData = async () => { - try { - let planType: Plan = this.getCurrentPlanType(); - - let pluginsResponse = await getSupportedPlugins(planType); - let driversResponse = await getSupportedDrivers(planType); - let frontendsResponse = await getSupportedFrontends(); - - let plugins = pluginsResponse.plugins; - let drivers = driversResponse.drivers; - let frontends = frontendsResponse.frontends; - - this.setState(oldState => ({ - ...oldState, - isFetchingPageData: false, - isPageError: false, - plugins: [...plugins], - drivers: [...drivers], - frontends: [...frontends], - })); - } catch (e) { - this.setState(oldState => ({ - ...oldState, - isFetchingPageData: false, - isPageError: true, - })); - } - } - - onPageErrorRetryClicked = () => { - window.location.reload(); - } - - onPluginSelected = (event: React.ChangeEvent) => { - let value = event.target.value; - this.setState(oldState => ({ - ...oldState, - selectedPlugin: value, - }), () => { - this.fetchCompatibilityIfNeeded(); - }); - } - - onDriverSelected = (event: React.ChangeEvent) => { - let value = event.target.value; - this.setState(oldState => ({ - ...oldState, - selectedDriver: value, - }), () => { - this.fetchCompatibilityIfNeeded(); - }); - } - - onFrontendSelected = (event: React.ChangeEvent) => { - let value = event.target.value; - this.setState(oldState => ({ - ...oldState, - selectedFrontend: value, - }), () => { - this.fetchCompatibilityIfNeeded(); - }); - } - - fetchCompatibilityIfNeeded = async () => { - if (this.state.selectedDriver === "" || this.state.selectedFrontend === "" || this.state.selectedPlugin === "") { - return; - } - - this.setState(oldState => ({ - ...oldState, - isFetchingCompatibility: true, - shouldShowCompatibility: true, - })); - - try { - const compatibilityResponse = await getCompatibility(this.getCurrentPlanType(), - this.state.selectedDriver, this.state.selectedPlugin, this.state.selectedFrontend); - this.setState(oldState => ({ - ...oldState, - isFetchingCompatibility: false, - compatibilityData: { ...compatibilityResponse }, - })); - } catch (e) { - this.setState(oldState => ({ - ...oldState, - isFetchingCompatibility: false, - shouldShowCompatibility: false, - isPageError: true, - })); - } - } -} \ No newline at end of file +
+ ); +} diff --git a/v2/src/components/compatibility/style.css b/v2/src/components/compatibility/style.css index dff423b64..3d19e3542 100644 --- a/v2/src/components/compatibility/style.css +++ b/v2/src/components/compatibility/style.css @@ -1,123 +1,90 @@ -@media only screen and (max-width: 736px) { - .compatibility-select-container select { - width: 100% !important; - } - - .compatibility-table { - width: 100% !important; - } -} - -@media only screen and (min-width: 737px) and (max-width: 1023px) { - .compatibility-select-container select { - width: 40vw !important; - } +.compatibility_matrix_box { + width: 100%; + border-radius: 12px; + border: 2px solid #333; - .compatibility-table { - width: 80vw !important; - } + margin-bottom: 30px; } -.compatibility-select-title { - font-size: 18px; - font-weight: 500; +.compatibility_matrix_box_header { + width: 100%; + border-radius: 11px 11px 0px 0px; + background: rgba(50, 50, 50, 1); + padding: 6px 22px; } -.compatibility-select-container select { - border-width: 1px !important; - border-color: #9E9E9E !important; - border-style: solid !important; - - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - - padding-left: 20px; - display: flex; - align-items: center; - font-size: 16px; - outline: none !important; - - display: flex; - margin: 1.5rem 0 2rem 0; - background-color: #1a1a1a; - border-radius: 6px !important; - background-image: url(/img/select.svg); - background-repeat: no-repeat; - background-position: right; - color: #fff; - height: 36px; - background-size: auto !important; - border-color: #ddd; - border-radius: 6px; - width: 220px; +.compatibility_matrix_box_body { + width: 100%; + background: #2a2a2a; + border-radius: 0px 0px 11px 11px; + padding: 6px 22px; } -.compatibility-select-container select:disabled { - background-image: url(/img/signupDropdownIconDisabled.png) !important; - color: rgba(34, 34, 34, 0.6); +.compatibility_matrix_title_one { + color: #f5f6f7; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; } -.compatibility-select-container select:invalid { - color: rgba(34, 34, 34, 0.6); -} +.compatibility_matrix_title_two { + color: #f93; -.compatibility-select-container select::-ms-expand { - display: none; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; } -.compatibility-table-section-container { - display: flex; -} +.compatibility_matrix_text_one { + color: #f5f6f7; -.compatibility-table { - width: 48.5vw; - display: flex; - flex-direction: column; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; } -.compatibility-table-header-row { - width: 100%; - display: flex; +.compatibility_matrix_text_two { + color: #edeef0; + text-align: center; + + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 20px; } -.compatibility-table-header { - width: calc((100%) / 2); - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - padding-top: 9px; - padding-bottom: 9px; - padding-left: 20px; - padding-right: 20px; - background-color: #002372; - display: flex; +.compatibility_matrix_text_three { + color: #edeef0; + + font-size: 13px; + font-style: normal; + font-weight: 600; + line-height: 20px; } -.compatibility-table-row { - width: 100%; - display: flex; +.sdk-selection-container { + display: flex; + justify-content: space-between; +} +.sdk-selection-container > div { + display: flex; + align-items: center; } -.compatibility-table-col { - width: calc((100%) / 2); - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - padding: 20px; - font-size: 18px; +.sdk-selection-container > div > span { + flex-shrink: 0; + flex-grow: 1; } -.compatibility-table-header-text { - font-size: 18px; - color: #ffffff; +.sdk-selection-container-bottom { + display: flex; + justify-content: space-between; + gap: 32px; } -.compatibility-select-title { - font-size: 18px; - font-weight: 500; -} \ No newline at end of file +.border-radius-0 { + border-radius: none !important; +} From aa8487540e499c829caf2bab8accd58b9efdc1e1 Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Thu, 28 Dec 2023 18:39:04 +0530 Subject: [PATCH 02/10] Added version select component --- v2/src/components/compatibility/index.tsx | 204 +++++++++++++++++----- v2/src/components/compatibility/style.css | 118 +++++++++++++ 2 files changed, 279 insertions(+), 43 deletions(-) diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx index 5248e33e5..2d2f617b6 100644 --- a/v2/src/components/compatibility/index.tsx +++ b/v2/src/components/compatibility/index.tsx @@ -15,12 +15,47 @@ export default function CompatibilityMatrix() { const [supportedFrontendSdks, setSupportedFrontendSdks] = useState(undefined); const [supportedBackendSdks, setSupportedBackedSdks] = useState(undefined); + const [selectedFrontendSdk, setSelectedFrontendSdk] = useState({ + id: "auth-react", + displayName: "auth-react" + }); + const [selectedBackendSdk, setSelectedBackendnSdk] = useState({ + id: "node", + displayName: "node" + }); + const [selectedCoreVersion, setSelectedCoreVersion] = useState(undefined); + const [selectedBackendSdkVersion, setSelectedBackendSdkVersion] = useState(undefined); - const [selectedFrontendSdk, setSelectedFrontendSdk] = useState(undefined); - const [selectedBackendSdk, setSelectedBackendnSdk] = useState(undefined); + const [compatibilityMatrix, setCompatibilityMatrix] = useState(undefined); - const [compatibilityMatrix, setCompatibilityMatrix] = useState(undefined) + let selectableCoreVersions: SdkType[] = []; + let selectableBackendSdkVersions: SdkType[] = []; + if (compatibilityMatrix !== undefined) { + selectableCoreVersions = compatibilityMatrix.cores.map(version => { + return { + id: version, + displayName: version + }; + }); + + if (selectedCoreVersion !== undefined) { + selectableBackendSdkVersions = compatibilityMatrix.coreToDriver[selectedCoreVersion.id].map(version => { + return { + id: version, + displayName: version + }; + }); + } else { + const latestCoreVersion = Object.keys(compatibilityMatrix.coreToDriver)[0]; + selectableBackendSdkVersions = compatibilityMatrix.coreToDriver[latestCoreVersion].map(version => { + return { + id: version, + displayName: version + }; + }); + } + } useEffect(() => { async function getSupportedSdks() { @@ -40,17 +75,17 @@ export default function CompatibilityMatrix() { async function getCompatibilityMatrix() { if (selectedBackendSdk !== undefined && selectedFrontendSdk !== undefined) { try { - const response = await getCompatibility(selectedBackendSdk, selectedFrontendSdk) - setCompatibilityMatrix(response) + const response = await getCompatibility(selectedBackendSdk.id, selectedFrontendSdk.id); + setCompatibilityMatrix(response); } catch (error) { - alert("Something went wrong, Please try again!") + console.log({ error }); + alert("Something went wrong, Please try again!"); } } } - getCompatibilityMatrix() - }, [selectedBackendSdk, selectedFrontendSdk]) + getCompatibilityMatrix(); + }, [selectedBackendSdk, selectedFrontendSdk]); - console.log({ compatibilityMatrix }) return (
@@ -61,50 +96,133 @@ export default function CompatibilityMatrix() {
Backend SDK - + {supportedBackendSdks !== undefined ? ( + setSelectedFrontendSdk(e.currentTarget.value)}> - {supportedFrontendSdks?.map(sdk => { - return - })} - + Frontend SDK + {supportedFrontendSdks !== undefined ? ( + setSelectedBackendnSdk(e.currentTarget.value)}> - {supportedBackendSdks?.map(sdk => { - return + {selectedBackendSdk !== undefined && selectedFrontendSdk !== undefined ? ( +
+
+
+ supertokens-core +
+
+ {compatibilityMatrix !== undefined ? ( + -
- -
-
-
- supertokens-node +
-
- +
+
+ {selectedBackendSdk.displayName} +
+
+ {compatibilityMatrix !== undefined ? ( + ) : (
)}
+
+ {selectedBackendSdk.displayName} +
{selectableBackendSdkVersions.map(({ id }) => { return {id}; })}
-
-
+
+
{selectedBackendSdk.displayName}
-
+
{compatibilityMatrix !== undefined ? ( - - {this.state.drivers.map(driver => { - return ( - - ); - })} - -
- ); - }; - - getDatabaseDropdown = () => { - return ( -
-
Select a database
- -
- If using our managed service, please select PostgreSQL -
- - -
- ); - }; - - getFrontendDropdown = () => { - return ( -
-
Select a frontend SDK
- - -
- ); - }; - - getDivider = () => { - return ( -
- ); - }; - - getTableHeader = (firstTitle: string, secondTitle: string, firstHoverText: string, secondHoverText: string) => { - return ( -
-
-
{firstTitle}
-
- -
-
{secondTitle}
-
-
- ); - }; - - getCoreToDriver = () => { - if (Object.keys(this.state.compatibilityData.coreToDriver).length === 0) { - return null; - } - const currentSelectedCore = this.state.selectedDriver; - let displayName = ""; - for (let i = 0; i < this.state.drivers.length; i++) { - const currentElement = this.state.drivers[i]; - if (currentElement.id === currentSelectedCore) { - displayName = currentElement.displayName; - } - } - - return ( -
-
- {this.getTableHeader("supertokens-core", `${displayName}`, "", "")} - {Object.keys(this.state.compatibilityData.coreToDriver).map((key, index) => { - let current = this.state.compatibilityData.coreToDriver[key]; - let isLast = index === Object.keys(this.state.compatibilityData.coreToDriver).length - 1; - - return ( -
-
- {key}.X -
-
- {current.map((ver, index) => { - return ( - - {ver} - - ); - })} -
-
- ); - })} -
-
- ); - }; - - getCoreToPlugin = () => { - if (Object.keys(this.state.compatibilityData.coreToPlugin).length === 0) { - return null; - } - const currentSelectedPlugin = this.state.selectedPlugin; - let displayName = ""; - for (let i = 0; i < this.state.plugins.length; i++) { - const currentElement = this.state.plugins[i]; - if (currentElement.id === currentSelectedPlugin) { - displayName = currentElement.displayName; - } - } - - return ( -
-
- {this.getTableHeader("SuperTokens core version", `${displayName} plugin version`, "", "")} - {Object.keys(this.state.compatibilityData.coreToPlugin).map((key, index) => { - let current = this.state.compatibilityData.coreToPlugin[key]; - let isLast = index === Object.keys(this.state.compatibilityData.coreToPlugin).length - 1; - - return ( -
-
- {key}.X -
-
- {current.map((ver, index) => { - return ( - - {ver} - - ); - })} -
-
- ); - })} -
-
- ); - }; - - getDriverToFrontend = () => { - if (Object.keys(this.state.compatibilityData.driverToFrontend).length === 0) { - return null; - } - const currentSelectedFrontendSdk = this.state.selectedFrontend; - let displayName = ""; - for (let i = 0; i < this.state.frontends.length; i++) { - const currentElement = this.state.frontends[i]; - if (currentElement.id === currentSelectedFrontendSdk) { - displayName = currentElement.displayName; - } - } - - let sdkDisplayName = ""; - for (const item of this.state.drivers) { - if (item.id === this.state.selectedDriver) { - sdkDisplayName = item.displayName; - } - } - - return ( -
-
- {this.getTableHeader(`${sdkDisplayName}`, `${displayName}`, "", "")} - {Object.keys(this.state.compatibilityData.driverToFrontend).map((key, index) => { - let current = this.state.compatibilityData.driverToFrontend[key]; - let isLast = index === Object.keys(this.state.compatibilityData.driverToFrontend).length - 1; - return ( -
-
- {key}.X -
-
- {current.map((ver, index) => { - return ( - - {ver} - - ); - })} -
-
- ); - })} -
-
- ); - }; - - getCompatibilityContent = () => { - if (this.state.isFetchingCompatibility) { - return ( -
-
-
- ); - } - - return ( -
- {/* {this.getCoreToPlugin()} */} - {/* {this.getDivider()} */} - {this.getCoreToDriver()} - {this.getDivider()} - {this.getDriverToFrontend()} -
- ); - }; - - render() { - if (this.state.isFetchingPageData) { - return ( -
-
-
-
-
- ); - } - - if (this.state.isPageError) { - return ( -
-
-
-
- Something went wrong -
- -
- Try again -
-
-
-
- ); - } - - return ( -
- {this.getFrameworkDropdown()} - {/* {this.getDatabaseDropdown()} */} - {this.getFrontendDropdown()} - - {this.state.shouldShowCompatibility && this.getDivider()} - - {this.state.shouldShowCompatibility && this.getCompatibilityContent()} -
- ); - } - - componentDidMount() { - this.fetchPageData(); - } - - fetchPageData = async () => { - try { - let planType: Plan = this.getCurrentPlanType(); - - let pluginsResponse = await getSupportedPlugins(planType); - let driversResponse = await getSupportedDrivers(); - let frontendsResponse = await getSupportedFrontends(); - - let plugins = pluginsResponse.plugins; - let drivers = driversResponse.drivers; - let frontends = frontendsResponse.frontends; - - this.setState(oldState => ({ - ...oldState, - isFetchingPageData: false, - isPageError: false, - plugins: [...plugins], - drivers: [...drivers], - frontends: [...frontends] - })); - } catch (e) { - this.setState(oldState => ({ - ...oldState, - isFetchingPageData: false, - isPageError: true - })); - } - }; - - onPageErrorRetryClicked = () => { - window.location.reload(); - }; - - onPluginSelected = (event: React.ChangeEvent) => { - let value = event.target.value; - this.setState( - oldState => ({ - ...oldState, - selectedPlugin: value - }), - () => { - this.fetchCompatibilityIfNeeded(); - } - ); - }; - - onDriverSelected = (event: React.ChangeEvent) => { - let value = event.target.value; - this.setState( - oldState => ({ - ...oldState, - selectedDriver: value - }), - () => { - this.fetchCompatibilityIfNeeded(); - } - ); - }; - - onFrontendSelected = (event: React.ChangeEvent) => { - let value = event.target.value; - this.setState( - oldState => ({ - ...oldState, - selectedFrontend: value - }), - () => { - this.fetchCompatibilityIfNeeded(); - } - ); - }; - - fetchCompatibilityIfNeeded = async () => { - if ( - this.state.selectedDriver === "" || - this.state.selectedFrontend === "" || - this.state.selectedPlugin === "" - ) { - return; - } - - this.setState(oldState => ({ - ...oldState, - isFetchingCompatibility: true, - shouldShowCompatibility: true - })); - - try { - const compatibilityResponse = await getCompatibility( - this.state.selectedDriver, - this.state.selectedFrontend - ); - this.setState(oldState => ({ - ...oldState, - isFetchingCompatibility: false, - compatibilityData: { ...compatibilityResponse } - })); - } catch (e) { - this.setState(oldState => ({ - ...oldState, - isFetchingCompatibility: false, - shouldShowCompatibility: false, - isPageError: true - })); - } - }; -} From ab48e79f8997b5178ba1f4a32750b40ad0f2d3dd Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Tue, 2 Jan 2024 18:56:45 +0530 Subject: [PATCH 05/10] fix: typo --- v2/src/components/compatibility/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx index edbbbfcb9..b71281b1c 100644 --- a/v2/src/components/compatibility/index.tsx +++ b/v2/src/components/compatibility/index.tsx @@ -78,9 +78,9 @@ export default function CompatibilityMatrix() { useEffect(() => { async function getSupportedSdks() { try { - const supportedFrotendsResponse = await getSupportedFrontends(); + const supportedFrontendsResponse = await getSupportedFrontends(); const supportedBackendsResponse = await getSupportedDrivers(); - setSupportedFrontendSdks(supportedFrotendsResponse.frontends); + setSupportedFrontendSdks(supportedFrontendsResponse.frontends); setSupportedBackedSdks(supportedBackendsResponse.drivers); } catch (_) { alert("Something went wrong, Please try again!"); From 1426eff3242f26564add514b7c0118bfa1a2bf9e Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Wed, 3 Jan 2024 15:18:05 +0530 Subject: [PATCH 06/10] fix: change select logic and extract select component into diffrent file --- .../compatibility/CompatibilitySelect.tsx | 73 +++++ v2/src/components/compatibility/index.tsx | 273 ++++++++++-------- v2/src/components/compatibility/style.css | 38 ++- .../theme/NavbarItem/SignUpButton/index.tsx | 37 +-- 4 files changed, 279 insertions(+), 142 deletions(-) create mode 100644 v2/src/components/compatibility/CompatibilitySelect.tsx diff --git a/v2/src/components/compatibility/CompatibilitySelect.tsx b/v2/src/components/compatibility/CompatibilitySelect.tsx new file mode 100644 index 000000000..7a7c98fdc --- /dev/null +++ b/v2/src/components/compatibility/CompatibilitySelect.tsx @@ -0,0 +1,73 @@ +import React, { useState } from "react"; + +export type CompatibilitySelectOptionType = { + id: string; + displayName: string; +}; + +type CompatibilitySelectProps = { + options: CompatibilitySelectOptionType[]; + selectedOption: CompatibilitySelectOptionType | undefined; + onOptionSelect: (value: CompatibilitySelectOptionType) => void; + disabled?: boolean; +}; + +export default function CompatibilitySelect({ + onOptionSelect, + options, + selectedOption, + disabled = false +}: CompatibilitySelectProps) { + const [showOptions, setShowOptions] = useState(false); + return ( +
setShowOptions(false)} + onMouseEnter={() => setShowOptions(true)} + // this code make sure that the select options show up in the mobile view + // since there will be no onMouseEnter event there. + onClick={() => setShowOptions(true)} + > +
+ {selectedOption !== undefined ? selectedOption.displayName : "Please select"} + + + +
+ {showOptions ? ( +
+
+ {options.map(option => { + return ( +
{ + e.stopPropagation(); + onOptionSelect(option); + setShowOptions(false); + }} + > + {option.displayName} +
+ ); + })} +
+
+ ) : null} +
+ ); +} diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx index b71281b1c..d8a4df5fa 100644 --- a/v2/src/components/compatibility/index.tsx +++ b/v2/src/components/compatibility/index.tsx @@ -5,11 +5,8 @@ import React, { useEffect, useState } from "react"; import getSupportedFrontends from "../api/frontends"; import getSupportedDrivers from "../api/drivers"; import { GetCompatibilityResponse, getCompatibility } from "../api/compatibility"; - -type SdkType = { - id: string; - displayName: string; -}; +import { CompatibilitySelectOptionType } from "./CompatibilitySelect"; +import Select from "./CompatibilitySelect"; enum LocalStorageKeys { SELECTED_FRONTEND = "selected_frontend_sdk", @@ -19,87 +16,133 @@ enum LocalStorageKeys { export default function CompatibilityMatrix() { const { cachedSelectedBackendSDK, cachedSelectedFrontendSDK } = useCachedSdkSelection(); - const [supportedFrontendSdks, setSupportedFrontendSdks] = useState(undefined); - const [supportedBackendSdks, setSupportedBackedSdks] = useState(undefined); + const [supportedFrontendSdks, setSupportedFrontendSdks] = useState( + undefined + ); + const [supportedBackendSdks, setSupportedBackedSdks] = useState( + undefined + ); - const [selectedFrontendSdk, setSelectedFrontendSdk] = useState(cachedSelectedFrontendSDK); - const [selectedBackendSdk, setSelectedBackendnSdk] = useState(cachedSelectedBackendSDK); + const [selectedFrontendSdk, setSelectedFrontendSdk] = useState( + cachedSelectedFrontendSDK + ); + const [selectedBackendSdk, setSelectedBackendnSdk] = useState( + cachedSelectedBackendSDK + ); - const [selectedCoreVersion, setSelectedCoreVersion] = useState(undefined); - const [selectedBackendSdkVersion, setSelectedBackendSdkVersion] = useState(undefined); + const [selectedCoreVersion, setSelectedCoreVersion] = useState( + undefined + ); + const [selectedBackendSdkVersion, setSelectedBackendSdkVersion] = useState< + CompatibilitySelectOptionType | undefined + >(undefined); const [compatibilityMatrix, setCompatibilityMatrix] = useState(undefined); - let selectableCoreVersions: SdkType[] = []; - let selectableBackendSdkVersions: SdkType[] = []; - let selectableFrontendSdkVersions: string[] = []; + const [isFailedFetchSupportedSdks, setIsFailedFetchSupportedSdks] = useState(false); + const [isFailedFetchCompatibilityMatrix, setIsFailedFetchCompatibilityMatrix] = useState(false); + + let selectableCoreVersions: CompatibilitySelectOptionType[] = []; + let selectableBackendSdkVersions: CompatibilitySelectOptionType[] = []; + + let compatableFrontendSdkVersions: string[] = []; + let compatableBackendSdkVersions: string[] = []; if (compatibilityMatrix !== undefined) { - selectableCoreVersions = compatibilityMatrix.cores.map(version => { + selectableCoreVersions = Object.keys(compatibilityMatrix.coreToDriver).map(version => { return { id: version, - displayName: version + displayName: `${version}.X` }; }); - if (selectedCoreVersion !== undefined) { - selectableBackendSdkVersions = compatibilityMatrix.coreToDriver[selectedCoreVersion.id].map(version => { - return { - id: version, - displayName: version - }; - }); - } else { - const latestCoreVersion = Object.keys(compatibilityMatrix.coreToDriver)[0]; - selectableBackendSdkVersions = compatibilityMatrix.coreToDriver[latestCoreVersion].map(version => { - return { - id: version, - displayName: version - }; - }); - } + selectableBackendSdkVersions = Object.keys(compatibilityMatrix.driverToFrontend).map(version => { + return { + id: version, + displayName: `${version}.X` + }; + }); + + const _selectedCoreVersion = + selectedCoreVersion === undefined ? selectableCoreVersions[0] : selectedCoreVersion; + const _selectedBackendSdkVersion = selectedBackendSdkVersion === undefined ? selectableBackendSdkVersions[0] : selectedBackendSdkVersion; + if (_selectedCoreVersion !== undefined) { + compatableBackendSdkVersions = compatibilityMatrix.coreToDriver[_selectedCoreVersion.id]; + } + if (_selectedBackendSdkVersion !== undefined) { - const indexKey = _selectedBackendSdkVersion.id - .split(".") - .slice(0, -1) - .join("."); - selectableFrontendSdkVersions = compatibilityMatrix.driverToFrontend[indexKey]; + compatableFrontendSdkVersions = compatibilityMatrix.driverToFrontend[_selectedBackendSdkVersion.id]; } } - function cacheSdkSelection(frontendSdk: SdkType | undefined, backendSdk: SdkType | undefined) { + function cacheSdkSelection( + frontendSdk: CompatibilitySelectOptionType | undefined, + backendSdk: CompatibilitySelectOptionType | undefined + ) { localStorage.setItem(LocalStorageKeys.SELECTED_FRONTEND, JSON.stringify(frontendSdk)); localStorage.setItem(LocalStorageKeys.SELECTED_BACKEND, JSON.stringify(backendSdk)); } - useEffect(() => { - async function getSupportedSdks() { + async function getSupportedSdks() { + setIsFailedFetchSupportedSdks(false); + setSupportedFrontendSdks(undefined); + setSupportedBackedSdks(undefined); + try { + const supportedFrontendsResponse = await getSupportedFrontends(); + const supportedBackendsResponse = await getSupportedDrivers(); + setSupportedFrontendSdks(supportedFrontendsResponse.frontends); + setSupportedBackedSdks(supportedBackendsResponse.drivers); + } catch (_) { + setIsFailedFetchSupportedSdks(true); + } + } + + async function getCompatibilityMatrix() { + setIsFailedFetchCompatibilityMatrix(false); + setCompatibilityMatrix(undefined); + if (selectedBackendSdk !== undefined && selectedFrontendSdk !== undefined) { try { - const supportedFrontendsResponse = await getSupportedFrontends(); - const supportedBackendsResponse = await getSupportedDrivers(); - setSupportedFrontendSdks(supportedFrontendsResponse.frontends); - setSupportedBackedSdks(supportedBackendsResponse.drivers); + const response = await getCompatibility(selectedBackendSdk.id, selectedFrontendSdk.id); + setCompatibilityMatrix(response); } catch (_) { - alert("Something went wrong, Please try again!"); + setIsFailedFetchCompatibilityMatrix(true); } } + } + + function renderErrorMessage() { + function handleRetry() { + if (isFailedFetchSupportedSdks === true) { + getSupportedSdks(); + } + + if (isFailedFetchCompatibilityMatrix === true) { + getCompatibilityMatrix(); + } + } + + if (isFailedFetchCompatibilityMatrix === true || isFailedFetchSupportedSdks === true) { + return ( +
+ +

+ Something went wrong! please Try again. +

+
+ ); + } + + return null; + } + + useEffect(() => { getSupportedSdks(); }, []); useEffect(() => { - async function getCompatibilityMatrix() { - if (selectedBackendSdk !== undefined && selectedFrontendSdk !== undefined) { - try { - const response = await getCompatibility(selectedBackendSdk.id, selectedFrontendSdk.id); - setCompatibilityMatrix(response); - } catch (_) { - alert("Something went wrong, Please try again!"); - } - } - } getCompatibilityMatrix(); cacheSdkSelection(selectedFrontendSdk, selectedBackendSdk); }, [selectedBackendSdk, selectedFrontendSdk]); @@ -120,8 +163,15 @@ export default function CompatibilityMatrix() { options={supportedBackendSdks} selectedOption={selectedBackendSdk} /> + ) : isFailedFetchSupportedSdks === true ? ( + ) : ( -
+
)}
- {selectedBackendSdk !== undefined && selectedFrontendSdk !== undefined ? ( + {renderErrorMessage()} + {selectedBackendSdk !== undefined && + selectedFrontendSdk !== undefined && + isFailedFetchCompatibilityMatrix === false && + isFailedFetchSupportedSdks === false ? (
@@ -157,15 +218,19 @@ export default function CompatibilityMatrix() { } /> ) : ( -
+
)}
{selectedBackendSdk.displayName}
- {selectableBackendSdkVersions.map(({ id }) => { - return {id}; + {compatableBackendSdkVersions.map(version => { + return ( + + {version} + + ); })}
@@ -185,15 +250,19 @@ export default function CompatibilityMatrix() { } /> ) : ( -
+
)}
{selectedFrontendSdk.displayName}
- {selectableFrontendSdkVersions.map(version => { - return {version}; + {compatableFrontendSdkVersions.map(version => { + return ( + + {version} + + ); })}
@@ -210,72 +279,30 @@ function useCachedSdkSelection() { return { cachedSelectedFrontendSDK: cachedSelectedFrontendSDK !== "undefined" && cachedSelectedFrontendSDK !== null - ? (JSON.parse(cachedSelectedFrontendSDK) as SdkType) + ? (JSON.parse(cachedSelectedFrontendSDK) as CompatibilitySelectOptionType) : undefined, cachedSelectedBackendSDK: cachedSelectedBackendSDK !== "undefined" && cachedSelectedBackendSDK !== null - ? (JSON.parse(cachedSelectedBackendSDK) as SdkType) + ? (JSON.parse(cachedSelectedBackendSDK) as CompatibilitySelectOptionType) : undefined }; } -type SelectProps = { - options: SdkType[]; - selectedOption: SdkType | undefined; - onOptionSelect: (value: SdkType) => void; -}; - -function Select({ onOptionSelect, options, selectedOption }: SelectProps) { - const [showOptions, setShowOptions] = useState(false); +function AlertIcon() { return ( -
setShowOptions(false)} - onMouseEnter={() => setShowOptions(true)} - // this code make sure that the select options show up in the mobile view - // since there will be no onMouseEnter event there. - onClick={() => setShowOptions(true)} - > -
- {selectedOption !== undefined ? selectedOption.id : "Please select"}{" "} - - - -
- {showOptions ? ( -
-
- {options.map(option => { - return ( -
{ - e.stopPropagation(); - onOptionSelect(option); - setShowOptions(false); - }} - > - {option.id} -
- ); - })} -
-
- ) : null} -
+ + + + + ); } diff --git a/v2/src/components/compatibility/style.css b/v2/src/components/compatibility/style.css index 468582250..eda5c877c 100644 --- a/v2/src/components/compatibility/style.css +++ b/v2/src/components/compatibility/style.css @@ -72,6 +72,7 @@ .sdk-selection-container { display: flex; justify-content: space-between; + gap: 6px; } .sdk-selection-container > div { display: flex; @@ -106,9 +107,11 @@ .version-pills-container { display: flex; + align-items: flex-start; flex-wrap: wrap; gap: 20px 8px; padding: 24px; + min-height: 140px; } .select-container { @@ -119,7 +122,7 @@ .select-container .select-action { display: flex; min-width: 140px; - height: 30px; + min-height: 30px; padding: 5px 4px 5px 10px; justify-content: space-between; align-items: center; @@ -174,6 +177,11 @@ border-radius: 11px 11px 0px 0px; } +.disabled { + opacity: 0.6; + cursor: not-allowed; +} + .shimmer { background: #424242; border-radius: 11px; @@ -183,10 +191,38 @@ display: inline-block; position: relative; + height: 30px; + min-width: 140px; + animation: shimmer 1.5s infinite linear; -webkit-animation: shimmer 1.5s infinite linear; } +.error-message { + display: flex; + gap: 6px; + align-items: center; + color: #ed344e; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.error-message p { + margin: 0 !important ; +} + +.error-message span { + color: #ff3c57; + font-weight: 600; + cursor: pointer; +} + +.error-message span:hover { + text-decoration-line: underline; +} + @-webkit-keyframes shimmer { 0% { background-position: -468px 0; diff --git a/v2/src/theme/NavbarItem/SignUpButton/index.tsx b/v2/src/theme/NavbarItem/SignUpButton/index.tsx index 1394c7d7a..4bd191ecc 100644 --- a/v2/src/theme/NavbarItem/SignUpButton/index.tsx +++ b/v2/src/theme/NavbarItem/SignUpButton/index.tsx @@ -1,30 +1,31 @@ -import React from 'react'; +import React from "react"; import "./style.css"; import supertokens from "supertokens-website"; import { getUserInformation } from "../../../components/api/user/info"; export default function SignUpButton() { + let [title, setTitle] = React.useState("Sign Up"); - let [title, setTitle] = React.useState("Sign Up") - - React.useEffect(() => { - async function setName() { - if (await supertokens.doesSessionExist()) { - let name = await fetchUserName(); - if (name !== undefined) { - setTitle(name); - } - } - } - setName(); - }, []) + // React.useEffect(() => { + // async function setName() { + // const doesSessionExists = await supertokens.doesSessionExist(); + // if (doesSessionExists === true) { + // let name = await fetchUserName(); + // if (name !== undefined) { + // setTitle(name); + // } + // } + // } + // setName(); + // }, []); return (
{ - window.open("/auth", '_blank').focus(); + window.open("/auth", "_blank").focus(); }} - className="signUpButton"> + className="signUpButton" + > {title}
); @@ -34,6 +35,6 @@ async function fetchUserName(): Promise { try { const { name } = await getUserInformation(); return name; - } catch (e) { } + } catch (e) {} return undefined; -} \ No newline at end of file +} From 1ae3da1c5116273206c59bd64bfe3567569bb8e2 Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Wed, 3 Jan 2024 16:20:57 +0530 Subject: [PATCH 07/10] fix: bulid errros and reset navbar component --- v2/src/components/compatibility/index.tsx | 26 ++++++++----- .../theme/NavbarItem/SignUpButton/index.tsx | 37 +++++++++---------- 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx index d8a4df5fa..2c97715e5 100644 --- a/v2/src/components/compatibility/index.tsx +++ b/v2/src/components/compatibility/index.tsx @@ -273,18 +273,24 @@ export default function CompatibilityMatrix() { } function useCachedSdkSelection() { - const cachedSelectedFrontendSDK = localStorage.getItem(LocalStorageKeys.SELECTED_FRONTEND); - const cachedSelectedBackendSDK = localStorage.getItem(LocalStorageKeys.SELECTED_BACKEND); + if (typeof window !== "undefined") { + const cachedSelectedFrontendSDK = localStorage.getItem(LocalStorageKeys.SELECTED_FRONTEND); + const cachedSelectedBackendSDK = localStorage.getItem(LocalStorageKeys.SELECTED_BACKEND); + return { + cachedSelectedFrontendSDK: + cachedSelectedFrontendSDK !== "undefined" && cachedSelectedFrontendSDK !== null + ? (JSON.parse(cachedSelectedFrontendSDK) as CompatibilitySelectOptionType) + : undefined, + cachedSelectedBackendSDK: + cachedSelectedBackendSDK !== "undefined" && cachedSelectedBackendSDK !== null + ? (JSON.parse(cachedSelectedBackendSDK) as CompatibilitySelectOptionType) + : undefined + }; + } return { - cachedSelectedFrontendSDK: - cachedSelectedFrontendSDK !== "undefined" && cachedSelectedFrontendSDK !== null - ? (JSON.parse(cachedSelectedFrontendSDK) as CompatibilitySelectOptionType) - : undefined, - cachedSelectedBackendSDK: - cachedSelectedBackendSDK !== "undefined" && cachedSelectedBackendSDK !== null - ? (JSON.parse(cachedSelectedBackendSDK) as CompatibilitySelectOptionType) - : undefined + cachedSelectedFrontendSDK: undefined, + cachedSelectedBackendSDK: undefined }; } diff --git a/v2/src/theme/NavbarItem/SignUpButton/index.tsx b/v2/src/theme/NavbarItem/SignUpButton/index.tsx index 4bd191ecc..1394c7d7a 100644 --- a/v2/src/theme/NavbarItem/SignUpButton/index.tsx +++ b/v2/src/theme/NavbarItem/SignUpButton/index.tsx @@ -1,31 +1,30 @@ -import React from "react"; +import React from 'react'; import "./style.css"; import supertokens from "supertokens-website"; import { getUserInformation } from "../../../components/api/user/info"; export default function SignUpButton() { - let [title, setTitle] = React.useState("Sign Up"); - // React.useEffect(() => { - // async function setName() { - // const doesSessionExists = await supertokens.doesSessionExist(); - // if (doesSessionExists === true) { - // let name = await fetchUserName(); - // if (name !== undefined) { - // setTitle(name); - // } - // } - // } - // setName(); - // }, []); + let [title, setTitle] = React.useState("Sign Up") + + React.useEffect(() => { + async function setName() { + if (await supertokens.doesSessionExist()) { + let name = await fetchUserName(); + if (name !== undefined) { + setTitle(name); + } + } + } + setName(); + }, []) return (
{ - window.open("/auth", "_blank").focus(); + window.open("/auth", '_blank').focus(); }} - className="signUpButton" - > + className="signUpButton"> {title}
); @@ -35,6 +34,6 @@ async function fetchUserName(): Promise { try { const { name } = await getUserInformation(); return name; - } catch (e) {} + } catch (e) { } return undefined; -} +} \ No newline at end of file From a16629c32632adf8d7dd6790bf6444274a686d3b Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Wed, 3 Jan 2024 17:11:42 +0530 Subject: [PATCH 08/10] fix: add not compatible warnings --- v2/src/components/api/frontends.ts | 4 ---- v2/src/components/compatibility/index.tsx | 12 ++++++++++++ v2/src/components/compatibility/style.css | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/v2/src/components/api/frontends.ts b/v2/src/components/api/frontends.ts index 00ec71778..9ed04f0af 100644 --- a/v2/src/components/api/frontends.ts +++ b/v2/src/components/api/frontends.ts @@ -13,10 +13,6 @@ export type GetSupportedFrontendsResponse = { frontends: GetSupportedFrontendsResponse_Frontend[]; }; -/** - * Fetches a list of supported frontend sdk in format {id: string, displayName: string} - * @param planType free or commercial - */ export default async function getSupportedFrontends(): Promise { let options: httpNetworking.GETRequestConfig = { timeout: 50000, diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx index 2c97715e5..a84f45482 100644 --- a/v2/src/components/compatibility/index.tsx +++ b/v2/src/components/compatibility/index.tsx @@ -145,6 +145,8 @@ export default function CompatibilityMatrix() { useEffect(() => { getCompatibilityMatrix(); cacheSdkSelection(selectedFrontendSdk, selectedBackendSdk); + setSelectedBackendSdkVersion(undefined); + setSelectedCoreVersion(undefined); }, [selectedBackendSdk, selectedFrontendSdk]); return ( @@ -232,6 +234,11 @@ export default function CompatibilityMatrix() { ); })} + {compatableBackendSdkVersions.length === 0 && compatibilityMatrix !== undefined ? ( +
+

This SDK is not compatible with selected core version.

+
+ ) : null}
@@ -264,6 +271,11 @@ export default function CompatibilityMatrix() { ); })} + {compatableFrontendSdkVersions.length === 0 && compatibilityMatrix !== undefined ? ( +
+

This SDK is not compatible with selected backend SDK version.

+
+ ) : null}
diff --git a/v2/src/components/compatibility/style.css b/v2/src/components/compatibility/style.css index eda5c877c..56bdad9b4 100644 --- a/v2/src/components/compatibility/style.css +++ b/v2/src/components/compatibility/style.css @@ -223,6 +223,22 @@ text-decoration-line: underline; } +.warning-message { + border-radius: 8px; + background: rgba(252, 193, 93, 0.1); + padding: 4px 8px; +} + +.warning-message p { + color: #fcc15d; + font-size: 13px !important; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 153.846% */ + + margin: 0 !important; +} + @-webkit-keyframes shimmer { 0% { background-position: -468px 0; From a15a71b1116fadffefbdb6474ac75b0c83aa61d3 Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Wed, 3 Jan 2024 19:32:13 +0530 Subject: [PATCH 09/10] fix: select flickering bug when disabled --- .../components/compatibility/CompatibilitySelect.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/v2/src/components/compatibility/CompatibilitySelect.tsx b/v2/src/components/compatibility/CompatibilitySelect.tsx index 7a7c98fdc..1d9c0ed43 100644 --- a/v2/src/components/compatibility/CompatibilitySelect.tsx +++ b/v2/src/components/compatibility/CompatibilitySelect.tsx @@ -19,14 +19,21 @@ export default function CompatibilitySelect({ disabled = false }: CompatibilitySelectProps) { const [showOptions, setShowOptions] = useState(false); + + function openSelect() { + if (disabled === false) { + setShowOptions(true); + } + } + return (
setShowOptions(false)} - onMouseEnter={() => setShowOptions(true)} + onMouseEnter={() => openSelect()} // this code make sure that the select options show up in the mobile view // since there will be no onMouseEnter event there. - onClick={() => setShowOptions(true)} + onClick={() => openSelect()} >
{selectedOption !== undefined ? selectedOption.displayName : "Please select"} From 396fbe1182b9198adc821bdcfc59873e4241eeed Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Wed, 3 Jan 2024 19:33:28 +0530 Subject: [PATCH 10/10] chore: update handler name --- v2/src/components/compatibility/CompatibilitySelect.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/v2/src/components/compatibility/CompatibilitySelect.tsx b/v2/src/components/compatibility/CompatibilitySelect.tsx index 1d9c0ed43..973fbdc02 100644 --- a/v2/src/components/compatibility/CompatibilitySelect.tsx +++ b/v2/src/components/compatibility/CompatibilitySelect.tsx @@ -20,7 +20,7 @@ export default function CompatibilitySelect({ }: CompatibilitySelectProps) { const [showOptions, setShowOptions] = useState(false); - function openSelect() { + function showSelectOptions() { if (disabled === false) { setShowOptions(true); } @@ -30,10 +30,10 @@ export default function CompatibilitySelect({
setShowOptions(false)} - onMouseEnter={() => openSelect()} + onMouseEnter={() => showSelectOptions()} // this code make sure that the select options show up in the mobile view // since there will be no onMouseEnter event there. - onClick={() => openSelect()} + onClick={() => showSelectOptions()} >
{selectedOption !== undefined ? selectedOption.displayName : "Please select"}