Fix UI Issues

package.json

@@ -7,10 +7,10 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.1.1",
-    "@mui/icons-material": "^5.14.3",
-    "@mui/lab": "^5.0.0-alpha.138",
-    "@mui/material": "^5.14.3",
-    "@mui/x-data-grid": "^6.10.2",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "^5.0.0-alpha.160",
+    "@mui/material": "^5.15.4",
+    "@mui/x-data-grid": "^6.18.7",
     "@types/react-beautiful-dnd": "^13.1.4",
     "array-move": "^4.0.0",
     "axios": "^1.4.0",

src/components/dashboard/content/list/DashboardFailureModesTableList.tsx

@@ -56,7 +56,7 @@ const DashboardFailureModesTableList = () => {
     return (
         <React.Fragment>
             <ImageList className={classes.gridList} cols={6}>
-                {tables.filter(m => !!m && !!m.iri).map((mode) => {
+                {tables.map((mode) => {
                     const routePath = ROUTES.FMEA + extractFragment(mode.iri);
                     return (
                         <ImageListItem key={mode.iri} className={classes.gridListTile}>

src/components/dashboard/content/list/DashboardFaultTreeList.tsx

@@ -52,7 +52,7 @@ const DashboardFaultTreeList = () => {
     return (
         <React.Fragment>
             <ImageList className={classes.gridList} cols={6}>
-                {faultTrees.filter(f => !!f && !!f.iri).map((tree) => {
+                {faultTrees.map((tree) => {
                     const routePath = ROUTES.FTA + extractFragment(tree.iri);
                     return (
                         <ImageListItem key={tree.iri} className={classes.gridListTile}>

src/components/dashboard/content/list/DashboardSystemList.tsx

@@ -52,7 +52,7 @@ const DashboardSystemList = () => {
     return (
         <React.Fragment>
             <ImageList className={classes.gridList} cols={6}>
-                {systems.filter(s => !!s && !!s.iri).map((system) => {
+                {systems.map((system) => {
                     const routePath = ROUTES.SYSTEM + extractFragment(system.iri);
                     return (
                         <ImageListItem key={system.iri} className={classes.gridListTile}>

src/components/dialog/faultEvent/FaultEventCreation.schema.tsx

@@ -3,7 +3,7 @@ import {yupOptionalNumber} from "@utils/validationUtils";
 import {EventType, GateType} from "@models/eventModel";
 
 export const schema = Yup.object().shape({
-    name: Yup.string()
+    "fault-event-name": Yup.string()
         .min(1, 'Must be at least 1 character long')
         .required('Event is mandatory'),
     description: Yup.string().default(''),

src/components/dialog/faultEvent/FaultEventCreation.tsx

@@ -28,7 +28,7 @@ const FaultEventCreation = ({useFormMethods, eventReusing}: Props) => {
 
     useEffect(() => {
         if (selectedEvent) {
-            setValue('name', selectedEvent.name)
+            setValue('fault-event-name', selectedEvent.name)
             setValue('description', selectedEvent.description)
             setValue('probability', selectedEvent.probability)
             setValue('eventType', selectedEvent.eventType)
@@ -43,7 +43,7 @@ const FaultEventCreation = ({useFormMethods, eventReusing}: Props) => {
         <div className={classes.divForm}>
             <Typography variant="subtitle1" gutterBottom>Event:</Typography>
             {eventReusing &&
-            <React.Fragment>
+            <>
                 <ControlledAutocomplete
                     control={control}
                     name="existingEvent"
@@ -54,16 +54,16 @@ const FaultEventCreation = ({useFormMethods, eventReusing}: Props) => {
                     defaultValue={null}
                 />
                 <Typography variant="subtitle1" className={classes.newEventTitle}>Create new Event:</Typography>
-            </React.Fragment>}
+            </>}
 
-            <FormControl className={classes.formControl}>
+            <FormControl disabled={existingEventSelected} className={classes.formControl}>
                 <InputLabel id="event-type-select-label">Type</InputLabel>
                 <Controller
-                    render={({ field: {onChange, value} }) =>
-                        <Select value={value} onChange={onChange} disabled={existingEventSelected} labelId="event-type-select-label" id="event-type-select">
+                    render={({ field  }) =>
+                        <Select {...field} disabled={existingEventSelected} labelId="event-type-select-label" label="Type">
                             {
                                 Object.values(EventType).map(value =>
-                                    <MenuItem key={`option-${value}`} value={value}>{value}</MenuItem>)
+                                    <MenuItem key={value} value={value}>{value}</MenuItem>)
                             }
                         </Select>
                     }
@@ -76,10 +76,11 @@ const FaultEventCreation = ({useFormMethods, eventReusing}: Props) => {
              {/*TODO: sort out default value UI bug*/}
             <TextField
                 margin="dense"
-                label="Event Name" name="name" fullWidth
+                label="Event Name" name="fault-event-name" fullWidth // fix "An element does not have an autocomplete attribute" generated by chrome when label is "name".
                 error={errors.name} helperText={errors.name?.message}
                 disabled={existingEventSelected}
-                {...register("name")}
+
+                {...register("fault-event-name")}
             />
 
              {/*TODO: sort out default value UI bug*/}
@@ -106,14 +107,13 @@ const FaultEventCreation = ({useFormMethods, eventReusing}: Props) => {
                 <FormControl className={classes.formControl}>
                     <InputLabel id="gate-type-select-label">Gate Type</InputLabel>
                     <Controller
-                        render={({field: { value, onChange }}) => {
-                            //@ts-ignore
-                            return <Select value={value} disabled={existingEventSelected} onChange={onChange} labelId="gate-type-select-label" id="gate-type-select" error={!!errors.gateType}>
+                        render={({field}) => {
+                            return <Select {...field} disabled={existingEventSelected}  labelId="gate-type-select-label" label="Gate Type" error={!!errors.gateType}>
                                 {
                                     gateTypeValues().map(value => {
                                         const [enabled, optionValue] = value
-                                        return <MenuItem key={`option-${value}`} value={optionValue}
-                                                         disabled={!enabled}>{value}</MenuItem>
+                                        return <MenuItem key={optionValue} value={optionValue}
+                                                         disabled={!enabled}>{optionValue}</MenuItem>
                                     })
                                 }
                             </Select>

src/components/dialog/faultEvent/FaultEventDialog.tsx

@@ -12,13 +12,13 @@ import {schema} from "./FaultEventCreation.schema";
 import {yupResolver} from "@hookform/resolvers/yup";
 import {eventFromHookFormValues} from "@services/faultEventService";
 import {FaultEventsReuseProvider} from "@hooks/useReusableFaultEvents";
-import {useEffect} from "react";
+import {FaultEvent} from "@models/eventModel";
 
 interface Props {
     open: boolean,
     eventIri: string,
     treeUri: string,
-    onCreated: () => void,
+    onCreated: (element: FaultEvent) => void,
     onClose: () => void,
 }
 
@@ -34,8 +34,8 @@ const FaultEventDialog = ({open, eventIri, treeUri, onCreated, onClose}: Props)
 
         faultEventService.addEvent(eventIri, requestEvent)
             .then(value => {
-                onClose()
-                onCreated()
+                onClose();
+                onCreated(value);
             })
             .catch(reason => showSnackbar(reason, SnackbarType.ERROR))
     }

src/components/editor/faultTree/Editor.tsx

@@ -119,6 +119,11 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => {
 
     const [eventDialogOpen, setEventDialogOpen] = useState(false);
 
+    const handleEventCreate = (newEvent: FaultEvent) => {
+        setSidebarSelectedEvent(newEvent);
+        refreshTree();
+    }
+
     const handleEventUpdate = (eventToUpdate: FaultEvent) => {
         faultEventService.update(eventToUpdate)
             .then(value => refreshTree())
@@ -176,7 +181,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => {
 
             <FaultEventDialog open={eventDialogOpen}
                               eventIri={contextMenuSelectedEvent?.iri} treeUri={faultTree?.iri}
-                              onCreated={refreshTree}
+                              onCreated={(newEvent) => handleEventCreate(newEvent)}
                               onClose={() => setEventDialogOpen(false)}/>
 
             <FailureModesTableDialog

src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx

@@ -31,10 +31,9 @@ const FaultEventShapeToolPane = ({data, onEventUpdated, refreshTree}: Props) =>
     let defaultValues;
 
     if (data) {
-        console.log(data);
         defaultValues = {
             eventType: data.eventType,
-            name: data.name,
+            "fault-event-name": data.name,
             description: data.description,
             probability: data.probability + "",
             gateType: data.gateType,
@@ -46,7 +45,6 @@ const FaultEventShapeToolPane = ({data, onEventUpdated, refreshTree}: Props) =>
         });
 
         updateFunction = async (values: any) => {
-            console.log(values);
             let dataClone = cloneDeep(data)
 
             const updatedFaultEvent = deepOmit(faultEventService.eventFromHookFormValues(values), '@type')

src/components/editor/faultTree/menu/faultEvent/reorder/FaultEventChildrenReorderList.tsx

@@ -37,8 +37,6 @@ const FaultEventChildrenReorderList = ({eventChildren, handleReorder}: Props) =>
         const oldIndex = result.source.index;
         const newIndex = result.destination.index;
 
-        console.log(result);
-
         setItems(items => {
             const newItems = arrayMoveImmutable(items, oldIndex, newIndex)
             handleChildrenReordered(newItems);

src/components/editor/system/menu/failureMode/ComponentFailureModesList.tsx

@@ -169,8 +169,7 @@ const ComponentFailureModesList = ({ component }) => {
                   <Box>
                       <FormGroup>
                           <FormControl>
-                              <TextField autoFocus
-                                         margin="dense"
+                              <TextField margin="dense"
                                          id="name"
                                          label="Failure mode name"
                                          type="text"

src/styles/App.styles.declarations.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { adaptV4Theme } from '@mui/material/styles';
-import {createMuiTheme, DeprecatedThemeOptions} from "@mui/material";
 import {createTheme} from "@mui/material/styles";
 
 declare module '@mui/material/styles' {
@@ -33,10 +31,10 @@ declare module '@mui/material/styles' {
     }
 }
 
-const createCustomMuiTheme = (options: DeprecatedThemeOptions) => {
-    return createTheme(adaptV4Theme({
+const createCustomMuiTheme = (options) => {
+    return createTheme({
         ...options,
-    }));
+    });
 }
 
 export default createCustomMuiTheme;

src/utils/JsonLdUtils.tsx

@@ -39,6 +39,8 @@ export default class JsonLdUtils {
     ): Promise<T[]> {
         if (Array.isArray(input) && input.length === 0) {
             return Promise.resolve([]);
+        } else if (Array.isArray(input["@graph"]) && input["@graph"].length === 0) {
+            return Promise.resolve([]);
         }
         return compact(input, context)
             .then((res) => JsonLdUtils.loadArrayFromCompactedGraph<T>(res))