in src/web/src/views/workspace/WSEditorSwaggerPicker.tsx [669:914]
render() {
const {
selectedResources,
existingResources,
resourceOptions,
resourceMap,
selectedVersion,
selectedModule,
selectedResourceInheritanceAAZVersionMap,
filterText,
realFilterText,
} = this.state;
return (
<React.Fragment>
<AppBar sx={{ position: "fixed" }}>
<Toolbar>
<IconButton edge="start" color="inherit" onClick={this.handleClose} aria-label="close">
<CloseIcon />
</IconButton>
<Typography
sx={{
ml: 2,
flex: 1,
flexDirection: "row",
display: "flex",
justifyContent: "center",
alignContent: "center",
}}
variant="h5"
component="div"
>
Add Resources
</Typography>
</Toolbar>
</AppBar>
<EditorPageLayout>
<Box
sx={{
flexShrink: 0,
width: 250,
flexDirection: "column",
display: "flex",
alignItems: "stretch",
justifyContent: "flex-start",
marginRight: "3vh",
}}
>
<ListSubheader> Swagger Filters</ListSubheader>
<MiddlePadding />
<SwaggerItemSelector
name="Swagger Module"
commonPrefix={this.state.moduleOptionsCommonPrefix}
options={this.state.moduleOptions}
value={this.state.selectedModule}
onValueUpdate={this.onModuleSelectorUpdate}
/>
<MiddlePadding />
<SwaggerItemSelector
name="Resource Provider"
commonPrefix={this.state.resourceProviderOptionsCommonPrefix}
options={this.state.resourceProviderOptions}
value={this.state.selectedResourceProvider}
onValueUpdate={this.onResourceProviderUpdate}
/>
<MiddlePadding />
<SwaggerItemSelector
name="API Version"
commonPrefix=""
options={this.state.versionOptions}
value={this.state.selectedVersion}
onValueUpdate={this.onVersionUpdate}
/>
<MiddlePadding2 />
<SwaggerItemSelector
name="Update Command Mode"
commonPrefix=""
options={this.state.updateOptions}
value={this.state.updateOption}
onValueUpdate={this.onUpdateOptionUpdate}
/>
<MiddlePadding2 />
<Button
variant="contained"
onClick={this.handleSubmit}
disabled={selectedModule === null || selectedVersion === null || selectedResources.size < 1}
>
Submit
</Button>
</Box>
<List
sx={{ flexGrow: 1 }}
subheader={
<ListSubheader>
<Box
sx={{
mt: 1,
mb: 1,
flexDirection: "column",
display: "flex",
alignItems: "stretch",
justifyContent: "flex-start",
}}
color="inherit"
>
<Typography component="h6">Resource Url</Typography>
<Paper
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
mt: 1,
}}
variant="outlined"
square
>
<ListItemButton
sx={{ maxWidth: 180 }}
dense
onClick={this.onSelectedAllClick}
disabled={resourceOptions.length === 0}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={selectedResources.size > 0 && selectedResources.size === resourceOptions.length}
indeterminate={selectedResources.size > 0 && selectedResources.size < resourceOptions.length}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": "SelectAll" }}
/>
</ListItemIcon>
<ListItemText
id="SelectAll"
primary={`All (${resourceOptions.length})`}
primaryTypographyProps={{
variant: "h6",
}}
/>
</ListItemButton>
<InputBase
sx={{ flex: 1 }}
placeholder="Filter by keywords"
inputProps={{ "aria-label": "Filter by keywords" }}
value={filterText}
onChange={(event: any) => {
const reg = /\{.*?\}/g;
this.setState({
filterText: event.target.value,
realFilterText: event.target.value.toLocaleLowerCase().replace(reg, "{}"),
});
}}
/>
</Paper>
</Box>
</ListSubheader>
}
>
{resourceOptions.length > 0 && (
<Paper sx={{ ml: 2, mr: 2 }} variant="outlined" square>
{resourceOptions
.filter((option) => {
if (realFilterText.trim().length > 0) {
return option.id.indexOf(realFilterText) > -1;
} else {
return true;
}
})
.map((option) => {
const labelId = `resource-${option.id}`;
const selected = selectedResources.has(option.id);
const inheritanceOptions = resourceMap[option.id]?.aazVersions;
let selectedInheritance = null;
if (selectedResourceInheritanceAAZVersionMap !== null) {
selectedInheritance = selectedResourceInheritanceAAZVersionMap[option.id];
}
return (
<ListItem
key={option.id}
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
disablePadding
>
<ListItemButton dense onClick={this.onResourceItemClick(option.id)}>
<ListItemIcon>
<Checkbox
edge="start"
checked={selected || existingResources.has(option.id)}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText
id={labelId}
primary={option.id}
primaryTypographyProps={{
variant: "h6",
}}
/>
</ListItemButton>
{selected && (
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel id={`${labelId}-inheritance-select-label`}>Inheritance</InputLabel>
<Select
id={`${labelId}-inheritance-select`}
value={selectedInheritance === null ? "_NULL_" : selectedInheritance}
onChange={(event) => {
this.onResourceInheritanceAAZVersionUpdate(
option.id,
event.target.value === "_NULL_" ? null : event.target.value,
);
}}
size="small"
>
<MenuItem value="_NULL_" key={`${labelId}-inheritance-select-null`}>
None
</MenuItem>
{inheritanceOptions &&
inheritanceOptions.map((inheritanceOption) => {
return (
<MenuItem
value={inheritanceOption}
key={`${labelId}-inheritance-select-${inheritanceOption}`}
>
{inheritanceOption}
</MenuItem>
);
})}
</Select>
<FormHelperText>Inherit modification from exported command models in aaz</FormHelperText>
</FormControl>
)}
</ListItem>
);
})}
</Paper>
)}
</List>
</EditorPageLayout>
<Backdrop sx={{ color: "#fff", zIndex: (theme: any) => theme.zIndex.drawer + 1 }} open={this.state.loading}>
{this.state.invalidText !== undefined && (