import React, { useState } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect";
import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
import { getAccessPolicyByUrl } from "../../../../framework/src/services/restService";
-import Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import PostAdd from '@material-ui/icons/PostAdd';
-import ArrowBack from '@material-ui/icons/ArrowBack';
-import RemoveIcon from '@material-ui/icons/RemoveCircleOutline';
-import SaveIcon from '@material-ui/icons/Save';
-import EditIcon from '@material-ui/icons/Edit';
-import Tooltip from "@material-ui/core/Tooltip";
-import FormControl from "@material-ui/core/FormControl";
-import IconButton from "@material-ui/core/IconButton";
-
-import InputLabel from "@material-ui/core/InputLabel";
-import Select from "@material-ui/core/Select";
-import MenuItem from "@material-ui/core/MenuItem";
-import Breadcrumbs from "@material-ui/core/Breadcrumbs";
-import Button from '@material-ui/core/Button';
-import Link from "@material-ui/core/Link";
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Fab from '@mui/material/Fab';
+import AddIcon from '@mui/icons-material/Add';
+import PostAdd from '@mui/icons-material/PostAdd';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import SaveIcon from '@mui/icons-material/Save';
+import EditIcon from '@mui/icons-material/Edit';
+import Tooltip from "@mui/material/Tooltip";
+import FormControl from "@mui/material/FormControl";
+import IconButton from "@mui/material/IconButton";
+
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Button from '@mui/material/Button';
+import Link from "@mui/material/Link";
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { BaseProps } from '../components/baseProps';
viewData: nextProps.viewData || null,
[OldProps]: nextProps,
choises: nextProps.displaySpecification.displayMode === DisplayModeType.doNotDisplay
+ || nextProps.displaySpecification.displayMode === DisplayModeType.displayAsMessage
? null
: nextProps.displaySpecification.displayMode === DisplayModeType.displayAsRPC
? nextProps.displaySpecification.inputViewSpecification && ConfigurationApplicationComponent.getChoisesFromElements(nextProps.displaySpecification.inputViewSpecification.elements, nextProps.viewData) || []
const subElements = currentCase?.elements;
return (
<>
- <FormControl key={uiElement.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
+ <FormControl variant="standard" key={uiElement.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
<InputLabel htmlFor={`select-${uiElement.id}`} >{uiElement.label}</InputLabel>
- <Select
+ <Select variant="standard"
aria-label={uiElement.label + '-selection'}
required={!!uiElement.mandatory}
onChange={(e) => {
private renderUIViewList(listSpecification: ViewSpecification, dataPath: string, listKeyProperty: string, apiDocPath: string, listData: { [key: string]: any }[]) {
const listElements = listSpecification.elements;
- const apiDocPathCreate = apiDocPath ? `${location.origin}${apiDocPath
+ const apiDocPathCreate = apiDocPath ? `${location.origin}${apiDocPath
.replace("$$$standard$$$", "topology-netconfnode%20resources%20-%20RestConf%20RFC%208040")
- .replace("$$$action$$$", "put")}_${listKeyProperty.replace(/[\/=\-\:]/g, '_')}_` : undefined;
+ .replace("$$$action$$$", "put")}${listKeyProperty ? `_${listKeyProperty.replace(/[\/=\-\:]/g, '_')}_` : '' }` : undefined;
+
+ const config = listSpecification.config && listKeyProperty; // We can not configure a list with no key.
const navigate = (path: string) => {
this.props.history.push(`${this.props.match.url}${path}`);
onClick: () => {
navigate("[]"); // empty key means new element
},
- disabled: !listSpecification.config,
+ disabled: !config,
};
const addWithApiDocElementAction = {
onClick: () => {
window.open(apiDocPathCreate, '_blank');
},
- disabled: !listSpecification.config,
+ disabled: !config,
};
const { classes, removeElement } = this.props;
const confirm = useConfirm();
return (
- <Tooltip title={"Remove"} >
- <IconButton disabled={props.disabled} className={classes.button} aria-label="remove-element-button"
+ <Tooltip disableInteractive title={"Remove"} >
+ <IconButton
+ disabled={props.disabled}
+ className={classes.button}
+ aria-label="remove-element-button"
onClick={async (e) => {
e.stopPropagation();
e.preventDefault();
- confirm({ title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" } })
- .then(() => removeElement(`${this.props.vPath}[${props.rowData[listKeyProperty]}]`))
- .then(props.onReload);
- }} >
+ confirm({ title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" }, cancellationButtonProps: { color:"inherit" } })
+ .then(() => {
+ let keyId = "";
+ if (listKeyProperty && listKeyProperty.split(" ").length > 1) {
+ keyId += listKeyProperty.split(" ").map(id => props.rowData[id]).join(",");
+ } else {
+ keyId = props.rowData[listKeyProperty];
+ }
+ return removeElement(`${this.props.vPath}[${keyId}]`)
+ }).then(props.onReload);
+ }}
+ size="large">
<RemoveIcon />
</IconButton>
</Tooltip>
}
return (
- <SelectElementTable stickyHeader idProperty={listKeyProperty} rows={listData} customActionButtons={apiDocPathCreate ? [addNewElementAction, addWithApiDocElementAction] : [addNewElementAction]} columns={
+ <SelectElementTable stickyHeader idProperty={listKeyProperty} tableId={null} rows={listData} customActionButtons={apiDocPathCreate ? [addNewElementAction, addWithApiDocElementAction] : [addNewElementAction]} columns={
Object.keys(listElements).reduce<ColumnModel<{ [key: string]: any }>[]>((acc, cur) => {
const elm = listElements[cur];
if (elm.uiType !== "object" && listData.every(entry => entry[elm.label] != null)) {
}, []).concat([{
property: "Actions", disableFilter: true, disableSorting: true, type: ColumnType.custom, customControl: (({ rowData }) => {
return (
- <DeleteIconWithConfirmation disabled={!listSpecification.config} rowData={rowData} onReload={() => this.props.vPath && this.props.reloadView(this.props.vPath)} />
+ <DeleteIconWithConfirmation disabled={!config} rowData={rowData} onReload={() => this.props.vPath && this.props.reloadView(this.props.vPath)} />
);
})
}])
} onHandleClick={(ev, row) => {
ev.preventDefault();
- navigate(`[${encodeURIComponent(row[listKeyProperty])}]`);
+ let keyId = ""
+ if (listKeyProperty && listKeyProperty.split(" ").length > 1) {
+ keyId += listKeyProperty.split(" ").map(id => row[id]).join(",");
+ } else {
+ keyId = row[listKeyProperty];
+ }
+ listKeyProperty && navigate(`[${encodeURIComponent(keyId)}]`); // Do not navigate without key.
}} ></SelectElementTable>
);
}
</div>
) : null
}
- <Button onClick={() => {
+ <Button color="inherit" onClick={() => {
const resultingViewData = inputViewSpecification && this.collectData(inputViewSpecification.elements);
this.props.executeRpc(this.props.vPath!, resultingViewData);
}} >Exec</Button>
<div className={this.props.classes.header}>
<div>
<Breadcrumbs aria-label="breadcrumbs">
- <Link color="inherit" href="#" aria-label="back-breadcrumb"
+ <Link underline="hover" color="inherit" href="#" aria-label="back-breadcrumb"
onClick={(ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
this.props.history.push(lastPath);
}}>Back</Link>
- <Link color="inherit" href="#"
+ <Link underline="hover" color="inherit" href="#"
aria-label={nodeId + '-breadcrumb'}
onClick={(ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
const propTitle = prop.replace(/^[^:]+:/, "");
const ret = (
<span key={ind}>
- <Link color="inherit" href="#"
+ <Link underline="hover" color="inherit" href="#"
aria-label={propTitle + '-breadcrumb'}
onClick={(ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
this.props.history.push(path);
}}><span>{propTitle}</span></Link>
{
- keyPath && <Link color="inherit" href="#"
+ keyPath && <Link underline="hover" color="inherit" href="#"
aria-label={key + '-breadcrumb'}
onClick={(ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
this.props.history.push(keyPath);
- }}>{`[${key}]`}</Link> || null
+ }}>{`[${key && key.replace(/\%2C/g, ",")}]`}</Link> || null
}
</span>
);
</div>
{this.state.editMode && (
<Fab color="secondary" aria-label="back-button" className={this.props.classes.fab} onClick={async () => {
- this.props.vPath && await this.props.reloadView(this.props.vPath);
+ this.props.vPath && (await this.props.reloadView(this.props.vPath));
this.setState({ editMode: false });
}} ><ArrowBack /></Fab>
) || null}
return (
<div className={this.props.classes.container}>
- <SelectElementTable stickyHeader idProperty={listKeyProperty} rows={listData} columns={
+ <SelectElementTable stickyHeader idProperty={listKeyProperty} tableId={null} rows={listData} columns={
Object.keys(listSpecification.elements).reduce<ColumnModel<{ [key: string]: any }>[]>((acc, cur) => {
const elm = listSpecification.elements[cur];
if (elm.uiType !== "object" && listData.every(entry => entry[elm.label] != null)) {
? this.renderUIViewList(ds.viewSpecification, ds.dataPath!, ds.keyProperty!, ds.apidocPath!, viewData)
: ds.displayMode === DisplayModeType.displayAsRPC
? this.renderUIViewRPC(ds.inputViewSpecification, ds.dataPath!, viewData!, outputData, undefined, true, false)
- : this.renderUIViewSelector(ds.viewSpecification, ds.dataPath!, viewData!, ds.keyProperty, editMode, isNew)
+ : ds.displayMode === DisplayModeType.displayAsMessage
+ ? this.renderMessage(ds.renderMessage)
+ : this.renderUIViewSelector(ds.viewSpecification, ds.dataPath!, viewData!, ds.keyProperty, editMode, isNew)
}
</div >
);
}
+ private renderMessage(renderMessage: string) {
+ return (
+ <div className={this.props.classes.container}>
+ <h4>{renderMessage}</h4>
+ </div>
+ );
+ }
+
private renderCollectingData() {
return (
<div className={this.props.classes.outer}>