Merge pull request #766 from supertokens/feat/version-matrix

feat: sdk compatibility table.
supertokens · Jan 3, 2024 · 6e35160 · 6e35160
2 parents ce79129 + 396fbe1
commit 6e35160
Show file tree

Hide file tree

Showing 6 changed files with 674 additions and 681 deletions.
diff --git 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<GetCompatibilityResponse> {
+export async function getCompatibility(driver: string, frontend: string): Promise<GetCompatibilityResponse> {
     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
@@ -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<GetSupportedDriversResponse> {
+export default async function getSupportedDrivers(): Promise<GetSupportedDriversResponse> {
     let options: httpNetworking.GETRequestConfig = {
         timeout: 50000,
         params: {
-            planType: planType === "COMMERCIAL_TRIAL" ? "COMMERCIAL" : planType,
+            planType: "FREE",
             mode: "PRODUCTION"
         }
     };

diff --git 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<GetSupportedFrontendsResponse> {
     let options: httpNetworking.GETRequestConfig = {
         timeout: 50000,

diff --git a/v2/src/components/compatibility/CompatibilitySelect.tsx b/v2/src/components/compatibility/CompatibilitySelect.tsx
@@ -0,0 +1,80 @@
+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);
+
+    function showSelectOptions() {
+        if (disabled === false) {
+            setShowOptions(true);
+        }
+    }
+
+    return (
+        <div
+            className={`select-container ${disabled === true ? "disabled" : ""}`}
+            onMouseLeave={() => setShowOptions(false)}
+            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={() => showSelectOptions()}
+        >
+            <div className="select-action">
+                <span>{selectedOption !== undefined ? selectedOption.displayName : "Please select"} </span>
+                <svg
+                    style={{ rotate: showOptions && disabled === false ? "180deg" : undefined }}
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                >
+                    <path
+                        d="M14 8L10 12L6 8"
+                        stroke="#AAAAAA"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+            </div>
+            {showOptions ? (
+                <div className="select-dropdown-wrapper">
+                    <div className="select-dropdown">
+                        {options.map(option => {
+                            return (
+                                <div
+                                    className="select-item"
+                                    key={option.id}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onOptionSelect(option);
+                                        setShowOptions(false);
+                                    }}
+                                >
+                                    {option.displayName}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+}