Merge pull request #831 from supertokens/fix/docs-page-issues

Fix: Compatibility table issues + Minor css issue
supertokens · Aug 17, 2024 · 4c5fbd6 · 4c5fbd6
2 parents c6171e1 + 6a85124
commit 4c5fbd6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/v2/src/components/appInfoForm/index.tsx b/v2/src/components/appInfoForm/index.tsx
@@ -578,7 +578,9 @@ export default class AppInfoForm extends React.PureComponent<PropsWithChildren<P
                                     marginRight: "10px"
                                 }}
                             />
-                            <span>
+                            <span style={{
+                                color: 'white !important'
+                            }}>
                                 I am using NextJS' <a target="_blank" rel="nofollow noopener noreferrer" href="https://nextjs.org/docs/api-routes/introduction">API route</a>
                             </span>
                         </label>

diff --git a/v2/src/components/compatibility/CompatibilitySelect.tsx b/v2/src/components/compatibility/CompatibilitySelect.tsx
@@ -8,17 +8,18 @@ export type CompatibilitySelectOptionType = {
 type CompatibilitySelectProps = {
     options: CompatibilitySelectOptionType[];
     setOption: (value: CompatibilitySelectOptionType) => void;
+    selectedOption: CompatibilitySelectOptionType|undefined
     disabled?: boolean;
 };
 
-export default function CompatibilitySelect({ setOption, options, disabled = false }: CompatibilitySelectProps) {
+export default function CompatibilitySelect({ setOption, options, selectedOption, disabled = false }: CompatibilitySelectProps) {
     function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
         const selectedOption = options.find(option => option.id === e.currentTarget.value)!;
         setOption(selectedOption);
     }
     return (
-        <select disabled={disabled} className="select-container" onChange={handleChange}>
-            <option disabled>Please select</option>
+        <select disabled={disabled} className="select-container" onChange={handleChange} value={selectedOption?.id}>
+            <option disabled={disabled}>Please select</option>
             {options.map(option => {
                 return (
                     <option value={option.id} key={option.id}>

diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx
@@ -160,19 +160,19 @@ export default function CompatibilityMatrix() {
                         <div>
                             <span className="compatibility_matrix_text_one">Backend SDK</span>
                             {supportedBackendSdks !== undefined ? (
-                                <Select setOption={setSelectedBackendnSdk} options={supportedBackendSdks} />
+                                <Select setOption={setSelectedBackendnSdk} options={supportedBackendSdks} selectedOption={selectedBackendSdk}/>
                             ) : isFailedFetchSupportedSdks === true ? (
-                                <Select disabled setOption={setSelectedBackendnSdk} options={[]} />
+                                <Select disabled setOption={setSelectedBackendnSdk} options={[]} selectedOption={selectedBackendSdk}/>
                             ) : (
                                 <div className="shimmer"></div>
                             )}
                         </div>
                         <div>
                             <span className="compatibility_matrix_text_one">Frontend SDK</span>
                             {supportedFrontendSdks !== undefined ? (
-                                <Select setOption={setSelectedFrontendSdk} options={supportedFrontendSdks} />
+                                <Select setOption={setSelectedFrontendSdk} options={supportedFrontendSdks} selectedOption={selectedFrontendSdk}/>
                             ) : isFailedFetchSupportedSdks === true ? (
-                                <Select disabled setOption={setSelectedFrontendSdk} options={[]} />
+                                <Select disabled setOption={setSelectedFrontendSdk} options={[]} selectedOption={selectedFrontendSdk}/>
                             ) : (
                                 <div className="shimmer"></div>
                             )}
@@ -192,7 +192,7 @@ export default function CompatibilityMatrix() {
                         </div>
                         <div className="compatibility_matrix_box_body sdk_version_select_container">
                             {compatibilityMatrix !== undefined ? (
-                                <Select setOption={setSelectedCoreVersion} options={selectableCoreVersions} />
+                                <Select setOption={setSelectedCoreVersion} options={selectableCoreVersions} selectedOption={selectedCoreVersion}/>
                             ) : (
                                 <div className="shimmer"></div>
                             )}
@@ -224,6 +224,7 @@ export default function CompatibilityMatrix() {
                                 <Select
                                     setOption={setSelectedBackendSdkVersion}
                                     options={selectableBackendSdkVersions}
+                                    selectedOption={selectedBackendSdkVersion}
                                 />
                             ) : (
                                 <div className="shimmer"></div>