cmoulliard
commented
8 months ago I did some minor changes to try to set selected => formData or defaultQuarkusVersion to select the proper value when we return back to the screen of the popup but we still got as first item of the list 3.8 (RECOMMENDED)
Definition of the backstage selectComponent : https://github.com/backstage/backstage/blob/master/packages/core-components/src/components/Select/Select.tsx#L143
import React, {useState} from "react";
import FormControl from "@material-ui/core/FormControl";
import {FieldExtensionComponentProps} from "@backstage/plugin-scaffolder-react";
import {Progress, Select, SelectItem} from "@backstage/core-components";
import useAsync from 'react-use/esm/useAsync';
/* Example returned by code.quarkus.io/api/streams
{
"javaCompatibility": {
"recommended": 17,
"versions": [
17,
21
]
},
"key": "io.quarkus.platform:3.8",
"lts": false,
"platformVersion": "3.8.2",
"quarkusCoreVersion": "3.8.2",
"recommended": true,
"status": "FINAL"
}
*/
export interface Version {
key: string;
quarkusCoreVersion: string;
platformVersion: string;
lts: boolean;
recommended: boolean;
javaCompatibility: javaCompatibility[];
status: string;
}
export interface javaCompatibility {
recommended: boolean;
versions: string[];
}
function userLabel(v: Version) {
const key = v.key.split(":")
if (v.recommended) {
return `${key[1]} (RECOMMENDED)`;
} else if (v.status !== "FINAL") {
return `${key[1]} (${v.status})`;
} else {
return key[1];
}
}
export const QuarkusVersionList = (props: FieldExtensionComponentProps<string>) => {
const {
onChange,
rawErrors,
required,
formData,
} = props;
const [quarkusVersion, setQuarkusVersion] = useState<Version[]>([]);
let selected: string = '';
const codeQuarkusUrl = 'https://code.quarkus.io';
const apiStreamsUrl = `${codeQuarkusUrl}/api/streams`
const {loading, value} = useAsync(async () => {
const response = await fetch(apiStreamsUrl);
const newData = await response.json();
setQuarkusVersion(newData)
// If formData is not undefined and null, then we assign it as the selected value
if (formData !== undefined && formData!== null) {
selected = formData;
console.log(`Quarkus Version selected : ${formData}`)
} else {
newData.forEach((v: Version) => {
console.log(`Version key: ${v.key}`);
if (v.recommended) {
selected = v.key
onChange(v.key);
console.log(`Recommended Quarkus Version is: ${v.key}`)
}
});
}
return newData;
});
const versionItems: SelectItem[] = value
? value?.map((i: Version) => ({label: userLabel(i), value: i.key}))
: [{label: 'Loading...', value: 'loading'}];
if (loading) {
return <Progress/>;
} else {
return (
<FormControl
margin="normal"
required={required}
error={rawErrors?.length > 0 && !formData}
>
<Select
native
label="Quarkus versions"
onChange={s => {
let resp = String(Array.isArray(s) ? s[0] : s)
onChange(resp)
selected = resp;
console.log(`Selected : ${resp}`)
}}
disabled={quarkusVersion.length === 1}
selected={selected}
items={versionItems}
/>
</FormControl>)
}
}
export default QuarkusVersionList;Action: Select the template, when screen appears select 3.2
As you can see from console the selected key is io.quarkus.platform:3.2
Action: Click on next and return back to the previous screen
The selected version is still io.quarkus.platform:3.2 but the popup list show alway the first item 3.8 (RECOMMENDED)
Idea: @iocanel
TODO
Use
<Select/>instead of<Autocomplete/>for<QuarkusVersionList/>. The following code work as RSJS FormData is getting the version selected.Note: When the user returns back to the screen of the
<Select/>then the value they selected within the popup is not anymore selected.