in src/web/src/views/workspace/WSEditorCommandContent.tsx [389:744]
render() {
const { workspaceUrl, previewCommand } = this.props;
const commandNames = previewCommand.names;
const name = commandPrefix + commandNames.join(" ");
const commandUrl =
`${workspaceUrl}/CommandTree/Nodes/aaz/` +
commandNames.slice(0, -1).join("/") +
"/Leaves/" +
commandNames[commandNames.length - 1];
const {
command,
displayCommandDialog,
displayExampleDialog,
displayOutputDialog,
displayCommandDeleteDialog,
displayAddSubcommandDialog,
exampleIdx,
outputIdx,
loading,
} = this.state;
const buildExampleView = (example: Example, idx: number) => {
const buildCommand = (exampleCommand: string, cmdIdx: number) => {
return (
<Box
key={`example-${idx}-command-${cmdIdx}`}
sx={{
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "flex-start",
}}
>
<Box
component="span"
sx={{
flexShrink: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start",
}}
>
<KeyboardDoubleArrowRightIcon fontSize="small" />
<ExampleCommandHeaderTypography sx={{ flexShrink: 0 }}>{commandPrefix}</ExampleCommandHeaderTypography>
</Box>
<Box
component="span"
sx={{
ml: 0.8,
}}
>
<ExampleCommandBodyTypography>{exampleCommand}</ExampleCommandBodyTypography>
</Box>
</Box>
);
};
return (
<Accordion
elevation={0}
expanded
key={`example-${idx}`}
onDoubleClick={() => {
this.onExampleDialogDisplay(idx);
}}
>
<ExampleAccordionSummary id={`example-${idx}-header`}>
<Box
sx={{
ml: 1,
flexGrow: 1,
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<SubtitleTypography sx={{ flexShrink: 0 }}>{example.name}</SubtitleTypography>
{/* <Box sx={{ flexGrow: 1 }} /> */}
<Button
sx={{ flexShrink: 0, ml: 3 }}
startIcon={<EditIcon color="secondary" fontSize="small" />}
onClick={() => {
this.onExampleDialogDisplay(idx);
}}
>
<ExampleEditTypography>Edit</ExampleEditTypography>
</Button>
</Box>
</ExampleAccordionSummary>
<AccordionDetails
sx={{
display: "flex",
flexDirection: "column",
alignItems: "stretch",
justifyContent: "flex-start",
ml: 3,
mr: 3,
paddingTop: 0,
}}
>
{example.commands.map(buildCommand)}
</AccordionDetails>
</Accordion>
);
};
const buildCommandCard = () => {
const shortHelp = (command ?? previewCommand).help?.short;
const longHelp = (command ?? previewCommand).help?.lines?.join("\n");
const lines: string[] = (command ?? previewCommand).help?.lines ?? [];
const stage = (command ?? previewCommand).stage;
const version = (command ?? previewCommand).version;
return (
<Card
onDoubleClick={this.onCommandDialogDisplay}
elevation={3}
sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
p: 2,
}}
>
<CardContent
sx={{
flex: "1 0 auto",
display: "flex",
flexDirection: "column",
justifyContent: "stretch",
}}
>
<Box
sx={{
mb: 2,
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<CardTitleTypography sx={{ flexShrink: 0 }}>[ COMMAND ]</CardTitleTypography>
<Box sx={{ flexGrow: 1 }} />
{stage === "Stable" && <StableTypography sx={{ flexShrink: 0 }}>{`v${version}`}</StableTypography>}
{stage === "Preview" && <PreviewTypography sx={{ flexShrink: 0 }}>{`v${version}`}</PreviewTypography>}
{stage === "Experimental" && (
<ExperimentalTypography sx={{ flexShrink: 0 }}>{`v${version}`}</ExperimentalTypography>
)}
</Box>
<NameTypography sx={{ mt: 1 }}>{name}</NameTypography>
{shortHelp && <ShortHelpTypography sx={{ ml: 6, mt: 2 }}> {shortHelp} </ShortHelpTypography>}
{!shortHelp && (
<ShortHelpPlaceHolderTypography sx={{ ml: 6, mt: 2 }}>
Please add command short summary!
</ShortHelpPlaceHolderTypography>
)}
{longHelp && (
<Box sx={{ ml: 6, mt: 1, mb: 1 }}>
{lines.map((line, idx) => (
<LongHelpTypography key={idx}>{line}</LongHelpTypography>
))}
</Box>
)}
</CardContent>
<CardActions
sx={{
display: "flex",
flexDirection: "row-reverse",
alignContent: "center",
justifyContent: "flex-start",
}}
>
{loading && (
<Box sx={{ width: "100%" }}>
<LinearProgress color="secondary" />
</Box>
)}
{!loading && (
<Box
sx={{
display: "flex",
flexDirection: "row",
alignContent: "center",
justifyContent: "flex-start",
}}
>
<Button
variant="contained"
size="small"
color="secondary"
disableElevation
onClick={this.onCommandDialogDisplay}
disabled={loading}
sx={{ mr: 2 }}
>
<Typography variant="body2">Edit</Typography>
</Button>
<Button
variant="outlined"
size="small"
color="secondary"
onClick={this.onCommandDeleteDialogDisplay}
disabled={loading}
sx={{ mr: 2 }}
>
<Typography variant="body2">Delete</Typography>
</Button>
</Box>
)}
</CardActions>
</Card>
);
};
const buildArgumentsCard = () => {
return (
<Card
elevation={3}
sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
mt: 1,
p: 2,
}}
>
<WSEditorCommandArgumentsContent
commandUrl={commandUrl}
args={command!.args!}
clsArgDefineMap={command!.clsArgDefineMap!}
onReloadArgs={this.loadCommand}
onAddSubCommand={this.onAddSubcommandDialogDisplay}
/>
</Card>
);
};
const buildExampleCard = () => {
const examples = command!.examples ?? [];
return (
<Card
elevation={3}
sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
mt: 1,
p: 2,
}}
>
<CardContent
sx={{
flex: "1 0 auto",
display: "flex",
flexDirection: "column",
alignItems: "stretch",
}}
>
<Box
sx={{
mb: 2,
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<CardTitleTypography sx={{ flexShrink: 0 }}>[ EXAMPLE ]</CardTitleTypography>
</Box>
{examples.length > 0 && <Box>{examples.map(buildExampleView)}</Box>}
</CardContent>
<CardActions
sx={{
display: "flex",
flexDirection: "row-reverse",
}}
>
<Button
variant="contained"
size="small"
color="secondary"
disableElevation
onClick={() => this.onExampleDialogDisplay(undefined)}
>
<Typography variant="body2">Add</Typography>
</Button>
</CardActions>
</Card>
);
};
return (
<React.Fragment>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "stretch",
}}
>
{buildCommandCard()}
{command !== undefined && command.args !== undefined && buildArgumentsCard()}
{command !== undefined && buildExampleCard()}
{command !== undefined && command.outputs !== undefined && (
<OutputCard command={command} onOutputDialogDisplay={this.onOutputDialogDisplay} />
)}
</Box>
{command !== undefined && displayCommandDialog && (
<CommandDialog
open={displayCommandDialog}
workspaceUrl={workspaceUrl}
command={command!}
onClose={this.handleCommandDialogClose}
/>
)}
{command !== undefined && displayExampleDialog && (
<ExampleDialog
open={displayExampleDialog}
workspaceUrl={workspaceUrl}
command={command!}
idx={exampleIdx}
onClose={this.handleExampleDialogClose}
/>
)}
{command !== undefined && displayOutputDialog && (
<OutputDialog
open={displayOutputDialog}
workspaceUrl={workspaceUrl}
command={command!}
idx={outputIdx}
onClose={this.handleOutputDialogClose}
/>
)}
{command !== undefined && displayCommandDeleteDialog && (
<CommandDeleteDialog
open={displayCommandDeleteDialog}
workspaceUrl={workspaceUrl}
command={command!}
onClose={this.handleCommandDeleteDialogClose}
/>
)}
{command !== undefined && displayAddSubcommandDialog && (
<AddSubcommandDialog
open={displayAddSubcommandDialog}
workspaceUrl={workspaceUrl}
command={command!}
onClose={this.handleAddSubcommandDisplayClose}
argVar={this.state.subcommandArgVar!}
subArgOptions={this.state.subcommandSubArgOptions!}
defaultGroupNames={this.state.subcommandDefaultGroupNames!}
/>
)}
</React.Fragment>
);
}