@gridsuite/commons-ui 0.42.0 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/ElementSearchDialog/element-search-dialog.js +5 -3
- package/es/components/TopBar/AboutDialog.js +236 -113
- package/es/components/TopBar/TopBar.js +22 -79
- package/es/components/translations/top-bar-en.js +7 -2
- package/es/components/translations/top-bar-fr.js +7 -2
- package/package.json +1 -1
|
@@ -7,9 +7,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
10
|
-
import { Dialog, DialogContent, TextField
|
|
10
|
+
import { Autocomplete, Dialog, DialogContent, TextField } from '@mui/material';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
|
-
import
|
|
12
|
+
import { Search, SearchOff } from '@mui/icons-material';
|
|
13
13
|
import { useIntl } from 'react-intl';
|
|
14
14
|
var ElementSearchDialog = function ElementSearchDialog(props) {
|
|
15
15
|
var intl = useIntl();
|
|
@@ -127,7 +127,9 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
|
|
|
127
127
|
id: 'element_search/label'
|
|
128
128
|
}),
|
|
129
129
|
InputProps: _extends({}, params.InputProps, {
|
|
130
|
-
startAdornment: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(
|
|
130
|
+
startAdornment: /*#__PURE__*/React.createElement(React.Fragment, null, searchTermDisabled ? /*#__PURE__*/React.createElement(SearchOff, {
|
|
131
|
+
color: "disabled"
|
|
132
|
+
}) : /*#__PURE__*/React.createElement(Search, {
|
|
131
133
|
color: "disabled"
|
|
132
134
|
}), params.InputProps.startAdornment)
|
|
133
135
|
})
|
|
@@ -6,12 +6,71 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
9
|
-
import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Fade, Grid, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
9
|
+
import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Fade, Grid, Stack, Tooltip, tooltipClasses, Typography, useMediaQuery, useTheme, Zoom } from '@mui/material';
|
|
10
10
|
import { LoadingButton } from '@mui/lab';
|
|
11
11
|
import { Apps, DnsOutlined, ExpandMore, Gavel, QuestionMark, Refresh, WidgetsOutlined } from '@mui/icons-material';
|
|
12
12
|
import { FormattedMessage } from 'react-intl';
|
|
13
13
|
import PropTypes from 'prop-types';
|
|
14
14
|
import { LogoText } from './GridLogo';
|
|
15
|
+
var styles = {
|
|
16
|
+
general: {
|
|
17
|
+
'.MuiAccordion-root': {
|
|
18
|
+
//dunno why the theme has the background as black in dark mode
|
|
19
|
+
bgcolor: 'unset'
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
mainSection: {
|
|
23
|
+
height: '5em'
|
|
24
|
+
},
|
|
25
|
+
logoSection: {
|
|
26
|
+
display: 'flex',
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
justifyContent: 'center'
|
|
29
|
+
},
|
|
30
|
+
mainInfos: {
|
|
31
|
+
textAlign: 'center',
|
|
32
|
+
marginTop: 0
|
|
33
|
+
},
|
|
34
|
+
versionField: function versionField(isUnknown) {
|
|
35
|
+
return isUnknown ? {
|
|
36
|
+
fontSize: '1.5em',
|
|
37
|
+
fontWeight: 'bold'
|
|
38
|
+
} : {
|
|
39
|
+
fontStyle: 'italic'
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
detailsSection: {
|
|
43
|
+
'.MuiAccordionSummary-content > .MuiSvgIcon-root': {
|
|
44
|
+
marginRight: '0.5rem'
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
function getGlobalVersion(fnPromise, type, setData, setLoader) {
|
|
49
|
+
if (fnPromise) {
|
|
50
|
+
console.debug('Getting', type, 'global version...');
|
|
51
|
+
return new Promise(function (resolve, reject) {
|
|
52
|
+
if (setLoader) {
|
|
53
|
+
setLoader(true);
|
|
54
|
+
}
|
|
55
|
+
resolve();
|
|
56
|
+
}).then(function () {
|
|
57
|
+
return fnPromise();
|
|
58
|
+
}).then(function (value) {
|
|
59
|
+
console.debug(type, 'global version is', value);
|
|
60
|
+
setData(value !== null && value !== void 0 ? value : null);
|
|
61
|
+
}, function (reason) {
|
|
62
|
+
console.debug(type, "global version isn't available", reason);
|
|
63
|
+
setData(null);
|
|
64
|
+
})["finally"](function () {
|
|
65
|
+
if (setLoader) {
|
|
66
|
+
setLoader(false);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
} else {
|
|
70
|
+
console.debug('No getter for global version');
|
|
71
|
+
setData(null);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
15
74
|
var moduleTypeSort = {
|
|
16
75
|
app: 1,
|
|
17
76
|
server: 10,
|
|
@@ -24,12 +83,12 @@ function compareModules(c1, c2) {
|
|
|
24
83
|
var AboutDialog = function AboutDialog(_ref) {
|
|
25
84
|
var open = _ref.open,
|
|
26
85
|
onClose = _ref.onClose,
|
|
27
|
-
|
|
86
|
+
globalVersionPromise = _ref.globalVersionPromise,
|
|
28
87
|
appName = _ref.appName,
|
|
29
88
|
appVersion = _ref.appVersion,
|
|
30
89
|
appGitTag = _ref.appGitTag,
|
|
31
90
|
appLicense = _ref.appLicense,
|
|
32
|
-
|
|
91
|
+
additionalModulesPromise = _ref.additionalModulesPromise;
|
|
33
92
|
var theme = useTheme();
|
|
34
93
|
var _useState = useState(false),
|
|
35
94
|
isRefreshing = _useState[0],
|
|
@@ -37,37 +96,36 @@ var AboutDialog = function AboutDialog(_ref) {
|
|
|
37
96
|
var _useState2 = useState(false),
|
|
38
97
|
loadingGlobalVersion = _useState2[0],
|
|
39
98
|
setLoadingGlobalVersion = _useState2[1];
|
|
99
|
+
var _useState3 = useState(false),
|
|
100
|
+
showGlobalVersion = _useState3[0],
|
|
101
|
+
setShowGlobalVersion = _useState3[1];
|
|
40
102
|
|
|
41
103
|
/* We want to get the initial version once at first render to detect later a new deploy */
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
104
|
+
var _useState4 = useState(undefined),
|
|
105
|
+
initialGlobalVersion = _useState4[0],
|
|
106
|
+
setInitialGlobalVersion = _useState4[1];
|
|
45
107
|
useEffect(function () {
|
|
46
|
-
if (
|
|
47
|
-
getGlobalVersion(
|
|
48
|
-
setStartingGlobalVersion(value);
|
|
49
|
-
setActualGlobalVersion(value);
|
|
50
|
-
});
|
|
108
|
+
if (initialGlobalVersion === undefined) {
|
|
109
|
+
getGlobalVersion(globalVersionPromise, 'Initial', setInitialGlobalVersion, undefined);
|
|
51
110
|
}
|
|
52
|
-
}, [
|
|
53
|
-
var
|
|
54
|
-
actualGlobalVersion =
|
|
55
|
-
setActualGlobalVersion =
|
|
111
|
+
}, [globalVersionPromise, initialGlobalVersion]);
|
|
112
|
+
var _useState5 = useState(null),
|
|
113
|
+
actualGlobalVersion = _useState5[0],
|
|
114
|
+
setActualGlobalVersion = _useState5[1];
|
|
56
115
|
useEffect(function () {
|
|
57
|
-
if (open
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
setActualGlobalVersion(value || null);
|
|
116
|
+
if (open) {
|
|
117
|
+
getGlobalVersion(globalVersionPromise, 'Actual', setActualGlobalVersion, function (loading) {
|
|
118
|
+
setLoadingGlobalVersion(loading);
|
|
119
|
+
setShowGlobalVersion(false);
|
|
62
120
|
});
|
|
63
121
|
}
|
|
64
|
-
}, [open,
|
|
65
|
-
var
|
|
66
|
-
loadingAdditionalModules =
|
|
67
|
-
setLoadingAdditionalModules =
|
|
68
|
-
var
|
|
69
|
-
modules =
|
|
70
|
-
setModules =
|
|
122
|
+
}, [open, globalVersionPromise]);
|
|
123
|
+
var _useState6 = useState(false),
|
|
124
|
+
loadingAdditionalModules = _useState6[0],
|
|
125
|
+
setLoadingAdditionalModules = _useState6[1];
|
|
126
|
+
var _useState7 = useState(null),
|
|
127
|
+
modules = _useState7[0],
|
|
128
|
+
setModules = _useState7[1];
|
|
71
129
|
useEffect(function () {
|
|
72
130
|
if (open) {
|
|
73
131
|
var currentApp = {
|
|
@@ -77,27 +135,23 @@ var AboutDialog = function AboutDialog(_ref) {
|
|
|
77
135
|
gitTag: appGitTag,
|
|
78
136
|
license: appLicense
|
|
79
137
|
};
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
setModules([currentApp]);
|
|
92
|
-
}
|
|
138
|
+
(additionalModulesPromise ? Promise.resolve(setLoadingAdditionalModules(true)).then(function () {
|
|
139
|
+
return additionalModulesPromise();
|
|
140
|
+
}) : Promise.reject(new Error('no getter'))).then(function (values) {
|
|
141
|
+
return Array.isArray(values) ? values : [];
|
|
142
|
+
}, function (reason) {
|
|
143
|
+
return [];
|
|
144
|
+
}).then(function (values) {
|
|
145
|
+
setModules([currentApp].concat(values));
|
|
146
|
+
})["finally"](function () {
|
|
147
|
+
return setLoadingAdditionalModules(false);
|
|
148
|
+
});
|
|
93
149
|
}
|
|
94
|
-
}, [open,
|
|
150
|
+
}, [open, additionalModulesPromise, appName, appVersion, appGitTag, appLicense]);
|
|
95
151
|
var handleClose = useCallback(function () {
|
|
96
152
|
if (onClose) {
|
|
97
153
|
onClose();
|
|
98
154
|
}
|
|
99
|
-
setModules(null);
|
|
100
|
-
setActualGlobalVersion(null);
|
|
101
155
|
}, [onClose]);
|
|
102
156
|
return /*#__PURE__*/React.createElement(Dialog, {
|
|
103
157
|
onClose: handleClose,
|
|
@@ -105,16 +159,20 @@ var AboutDialog = function AboutDialog(_ref) {
|
|
|
105
159
|
fullWidth: true,
|
|
106
160
|
maxWidth: "md",
|
|
107
161
|
fullScreen: useMediaQuery(theme.breakpoints.down('md')),
|
|
162
|
+
sx: styles.general,
|
|
108
163
|
"aria-labelledby": "alert-dialog-title",
|
|
109
|
-
"aria-describedby": "alert-dialog-description"
|
|
164
|
+
"aria-describedby": "alert-dialog-description",
|
|
165
|
+
TransitionProps: {
|
|
166
|
+
onExited: function onExited(node) {
|
|
167
|
+
setModules(null);
|
|
168
|
+
setActualGlobalVersion(null);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
110
171
|
}, /*#__PURE__*/React.createElement(DialogTitle, {
|
|
111
172
|
id: "alert-dialog-title"
|
|
112
173
|
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
113
174
|
id: 'about-dialog/title'
|
|
114
|
-
})
|
|
115
|
-
dividers: true,
|
|
116
|
-
id: "alert-dialog-description"
|
|
117
|
-
}, /*#__PURE__*/React.createElement(Box, null, startingGlobalVersion !== undefined && startingGlobalVersion !== null && actualGlobalVersion !== null && startingGlobalVersion !== actualGlobalVersion && /*#__PURE__*/React.createElement(Collapse, {
|
|
175
|
+
}), initialGlobalVersion !== undefined && initialGlobalVersion !== null && actualGlobalVersion !== null && initialGlobalVersion !== actualGlobalVersion && /*#__PURE__*/React.createElement(Collapse, {
|
|
118
176
|
"in": open
|
|
119
177
|
}, /*#__PURE__*/React.createElement(Alert, {
|
|
120
178
|
severity: "warning",
|
|
@@ -135,68 +193,39 @@ var AboutDialog = function AboutDialog(_ref) {
|
|
|
135
193
|
id: "refresh"
|
|
136
194
|
})),
|
|
137
195
|
sx: {
|
|
138
|
-
marginBottom:
|
|
196
|
+
marginBottom: 2
|
|
139
197
|
}
|
|
140
198
|
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
141
199
|
id: "about-dialog/alert-running-old-version-msg"
|
|
142
200
|
}))), /*#__PURE__*/React.createElement(Box, {
|
|
143
|
-
sx:
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
justifyContent: 'center'
|
|
147
|
-
}
|
|
201
|
+
sx: styles.mainSection
|
|
202
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
203
|
+
sx: styles.logoSection
|
|
148
204
|
}, /*#__PURE__*/React.createElement(LogoText, {
|
|
149
205
|
appName: "Suite",
|
|
150
206
|
appColor: theme.palette.grey['500']
|
|
151
207
|
})), /*#__PURE__*/React.createElement(Box, {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
textAlign: 'center',
|
|
155
|
-
marginTop: 0,
|
|
156
|
-
'dt, dd': {
|
|
157
|
-
display: 'inline',
|
|
158
|
-
margin: 0
|
|
159
|
-
},
|
|
160
|
-
dt: {
|
|
161
|
-
marginRight: '0.5em',
|
|
162
|
-
'&:after': {
|
|
163
|
-
content: '" :"'
|
|
164
|
-
},
|
|
165
|
-
'&:before': {
|
|
166
|
-
content: "'\\A'",
|
|
167
|
-
whiteSpace: 'pre'
|
|
168
|
-
},
|
|
169
|
-
'&:first-child': {
|
|
170
|
-
'&:before': {
|
|
171
|
-
content: "''"
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}, /*#__PURE__*/React.createElement("dt", null, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
177
|
-
id: "about-dialog/version"
|
|
178
|
-
})), /*#__PURE__*/React.createElement("dd", null, loadingGlobalVersion ? '…' : actualGlobalVersion ? /*#__PURE__*/React.createElement("b", {
|
|
179
|
-
style: {
|
|
180
|
-
fontSize: '1.5em'
|
|
181
|
-
}
|
|
182
|
-
}, actualGlobalVersion) : /*#__PURE__*/React.createElement("i", null, "unknown")), /*#__PURE__*/React.createElement(Fade, {
|
|
208
|
+
sx: styles.mainInfos
|
|
209
|
+
}, /*#__PURE__*/React.createElement(Fade, {
|
|
183
210
|
"in": loadingGlobalVersion,
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
}, /*#__PURE__*/React.createElement(CircularProgress, {
|
|
189
|
-
size: "1rem"
|
|
190
|
-
})))), /*#__PURE__*/React.createElement(Box, {
|
|
191
|
-
sx: {
|
|
192
|
-
'.MuiAccordion-root': {
|
|
193
|
-
//dunno why the theme has the background as black in dark mode
|
|
194
|
-
bgcolor: 'unset'
|
|
195
|
-
},
|
|
196
|
-
'.MuiAccordionSummary-content > .MuiSvgIcon-root': {
|
|
197
|
-
marginRight: '0.5rem'
|
|
198
|
-
}
|
|
211
|
+
appear: true,
|
|
212
|
+
unmountOnExit: true,
|
|
213
|
+
onExited: function onExited(node) {
|
|
214
|
+
return setShowGlobalVersion(true);
|
|
199
215
|
}
|
|
216
|
+
}, /*#__PURE__*/React.createElement(CircularProgress, null)), showGlobalVersion && /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
217
|
+
id: "about-dialog/version",
|
|
218
|
+
defaultMessage: "Version {version}",
|
|
219
|
+
values: {
|
|
220
|
+
version: /*#__PURE__*/React.createElement(Typography, {
|
|
221
|
+
component: "span",
|
|
222
|
+
sx: styles.versionField(!loadingGlobalVersion && actualGlobalVersion)
|
|
223
|
+
}, actualGlobalVersion || 'unknown')
|
|
224
|
+
}
|
|
225
|
+
}))))), /*#__PURE__*/React.createElement(DialogContent, {
|
|
226
|
+
id: "alert-dialog-description"
|
|
227
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
228
|
+
sx: styles.detailsSection
|
|
200
229
|
}, /*#__PURE__*/React.createElement(Accordion, {
|
|
201
230
|
disableGutters: true,
|
|
202
231
|
variant: "outlined",
|
|
@@ -224,7 +253,6 @@ var AboutDialog = function AboutDialog(_ref) {
|
|
|
224
253
|
}, appLicense)), /*#__PURE__*/React.createElement(AccordionDetails, null, "license app summary text")), /*#__PURE__*/React.createElement(Accordion, {
|
|
225
254
|
disableGutters: true,
|
|
226
255
|
variant: "outlined",
|
|
227
|
-
defaultExpanded: true,
|
|
228
256
|
TransitionProps: {
|
|
229
257
|
unmountOnExit: true
|
|
230
258
|
}
|
|
@@ -254,7 +282,8 @@ var AboutDialog = function AboutDialog(_ref) {
|
|
|
254
282
|
key: "module-" + idx,
|
|
255
283
|
type: module.type,
|
|
256
284
|
name: module.name,
|
|
257
|
-
version: module.
|
|
285
|
+
version: module.version,
|
|
286
|
+
gitTag: module.gitTag,
|
|
258
287
|
license: module.license
|
|
259
288
|
});
|
|
260
289
|
})) || /*#__PURE__*/React.createElement(Typography, {
|
|
@@ -276,27 +305,80 @@ AboutDialog.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
276
305
|
appVersion: PropTypes.string,
|
|
277
306
|
appGitTag: PropTypes.string,
|
|
278
307
|
appLicense: PropTypes.string,
|
|
279
|
-
|
|
280
|
-
|
|
308
|
+
globalVersionPromise: PropTypes.func,
|
|
309
|
+
additionalModulesPromise: PropTypes.func
|
|
281
310
|
} : {};
|
|
311
|
+
var moduleStyles = {
|
|
312
|
+
icons: {
|
|
313
|
+
flexGrow: 0,
|
|
314
|
+
position: 'relative',
|
|
315
|
+
top: '4px',
|
|
316
|
+
flexShrink: 0
|
|
317
|
+
},
|
|
318
|
+
version: {
|
|
319
|
+
flexGrow: 0,
|
|
320
|
+
alignSelf: 'flex-end',
|
|
321
|
+
flexShrink: 0
|
|
322
|
+
},
|
|
323
|
+
tooltip: function tooltip(theme) {
|
|
324
|
+
var _ref2;
|
|
325
|
+
return _ref2 = {}, _ref2["& ." + tooltipClasses.tooltip] = {
|
|
326
|
+
border: '1px solid #dadde9',
|
|
327
|
+
boxShadow: theme.shadows[1]
|
|
328
|
+
}, _ref2;
|
|
329
|
+
},
|
|
330
|
+
tooltipDetails: {
|
|
331
|
+
display: 'grid',
|
|
332
|
+
gridTemplateColumns: 'max-content auto',
|
|
333
|
+
margin: 0,
|
|
334
|
+
dt: {
|
|
335
|
+
gridColumnStart: 1,
|
|
336
|
+
'&:after': {
|
|
337
|
+
content: '" :"'
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
dd: {
|
|
341
|
+
gridColumnStart: 2,
|
|
342
|
+
paddingLeft: '0.5em'
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
};
|
|
282
346
|
var ModuleTypesIcons = {
|
|
283
347
|
app: /*#__PURE__*/React.createElement(WidgetsOutlined, {
|
|
348
|
+
sx: moduleStyles.icons,
|
|
284
349
|
fontSize: "small",
|
|
285
350
|
color: "primary"
|
|
286
351
|
}),
|
|
287
352
|
server: /*#__PURE__*/React.createElement(DnsOutlined, {
|
|
353
|
+
sx: moduleStyles.icons,
|
|
288
354
|
fontSize: "small",
|
|
289
355
|
color: "secondary"
|
|
290
356
|
}),
|
|
291
357
|
other: /*#__PURE__*/React.createElement(QuestionMark, {
|
|
358
|
+
sx: moduleStyles.icons,
|
|
292
359
|
fontSize: "small"
|
|
293
360
|
})
|
|
294
361
|
};
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
362
|
+
function insensitiveCaseCompare(str, obj) {
|
|
363
|
+
return str.localeCompare(obj, undefined, {
|
|
364
|
+
sensitivity: 'base'
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
function tooltipTypeLabel(type) {
|
|
368
|
+
if (insensitiveCaseCompare('app', type) === 0) {
|
|
369
|
+
return 'about-dialog/module-tooltip-app';
|
|
370
|
+
} else if (insensitiveCaseCompare('server', type) === 0) {
|
|
371
|
+
return 'about-dialog/module-tooltip-server';
|
|
372
|
+
} else {
|
|
373
|
+
return 'about-dialog/module-tooltip-other';
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
var Module = function Module(_ref3) {
|
|
377
|
+
var type = _ref3.type,
|
|
378
|
+
name = _ref3.name,
|
|
379
|
+
version = _ref3.version,
|
|
380
|
+
gitTag = _ref3.gitTag,
|
|
381
|
+
license = _ref3.license;
|
|
300
382
|
return /*#__PURE__*/React.createElement(Grid, {
|
|
301
383
|
item: true,
|
|
302
384
|
xs: 12,
|
|
@@ -307,13 +389,53 @@ var Module = function Module(_ref2) {
|
|
|
307
389
|
minWidth: '3em'
|
|
308
390
|
}
|
|
309
391
|
}
|
|
392
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
393
|
+
TransitionComponent: Zoom,
|
|
394
|
+
enterDelay: 2500,
|
|
395
|
+
enterNextDelay: 350,
|
|
396
|
+
leaveDelay: 200,
|
|
397
|
+
placement: "bottom-start",
|
|
398
|
+
arrow: true,
|
|
399
|
+
sx: moduleStyles.tooltip,
|
|
400
|
+
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
|
|
401
|
+
variant: "body1"
|
|
402
|
+
}, name || '<?>'), /*#__PURE__*/React.createElement(Box, {
|
|
403
|
+
component: "dl",
|
|
404
|
+
sx: moduleStyles.tooltipDetails
|
|
405
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
406
|
+
variant: "body2",
|
|
407
|
+
component: "dt"
|
|
408
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
409
|
+
id: "about-dialog/label-type"
|
|
410
|
+
})), /*#__PURE__*/React.createElement(Typography, {
|
|
411
|
+
variant: "body2",
|
|
412
|
+
component: "dd"
|
|
413
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
414
|
+
id: tooltipTypeLabel(type)
|
|
415
|
+
})), version && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
|
|
416
|
+
variant: "body2",
|
|
417
|
+
component: "dt"
|
|
418
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
419
|
+
id: "about-dialog/label-version"
|
|
420
|
+
})), /*#__PURE__*/React.createElement(Typography, {
|
|
421
|
+
variant: "body2",
|
|
422
|
+
component: "dd"
|
|
423
|
+
}, version)), gitTag && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
|
|
424
|
+
variant: "body2",
|
|
425
|
+
component: "dt"
|
|
426
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
427
|
+
id: "about-dialog/label-git-version"
|
|
428
|
+
})), /*#__PURE__*/React.createElement(Typography, {
|
|
429
|
+
variant: "body2",
|
|
430
|
+
component: "dd"
|
|
431
|
+
}, gitTag))))
|
|
310
432
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
311
433
|
direction: "row",
|
|
312
434
|
justifyContent: "flex-start",
|
|
313
435
|
alignItems: "baseline",
|
|
314
436
|
spacing: 1
|
|
315
437
|
}, ModuleTypesIcons[type] || ModuleTypesIcons['other'], /*#__PURE__*/React.createElement(Typography, {
|
|
316
|
-
display: "inline
|
|
438
|
+
display: "inline",
|
|
317
439
|
noWrap: true
|
|
318
440
|
}, name || '<?>'), /*#__PURE__*/React.createElement(Typography, {
|
|
319
441
|
variant: "caption",
|
|
@@ -321,13 +443,14 @@ var Module = function Module(_ref2) {
|
|
|
321
443
|
return theme.palette.text.secondary;
|
|
322
444
|
},
|
|
323
445
|
display: "inline",
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
}, version || null)));
|
|
446
|
+
noWrap: true,
|
|
447
|
+
sx: moduleStyles.version
|
|
448
|
+
}, gitTag || version || null))));
|
|
327
449
|
};
|
|
328
450
|
Module.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
329
451
|
type: PropTypes.string,
|
|
330
452
|
name: PropTypes.string,
|
|
331
453
|
version: PropTypes.string,
|
|
454
|
+
gitTag: PropTypes.string,
|
|
332
455
|
license: PropTypes.string
|
|
333
456
|
} : {};
|
|
@@ -6,15 +6,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
6
6
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import React, {
|
|
9
|
+
import React, { useMemo, useRef, useState } from 'react';
|
|
10
10
|
import { FormattedMessage } from 'react-intl';
|
|
11
|
-
import { AppBar, Box, Button, ClickAwayListener, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper, Popper, ToggleButton, ToggleButtonGroup, Toolbar, Typography } from '@mui/material';
|
|
12
|
-
import { Apps as AppsIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Brightness3 as Brightness3Icon, Computer as ComputerIcon, ExitToApp as ExitToAppIcon,
|
|
11
|
+
import { AppBar, Box, Button, ClickAwayListener, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper, Popper, ToggleButton, ToggleButtonGroup, Toolbar, Typography } from '@mui/material';
|
|
12
|
+
import { Apps as AppsIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Brightness3 as Brightness3Icon, Computer as ComputerIcon, ExitToApp as ExitToAppIcon, Fullscreen as FullscreenIcon, FullscreenExit as FullscreenExitIcon, HelpOutline as HelpOutlineIcon, Person as PersonIcon, Settings as SettingsIcon, WbSunny as WbSunnyIcon } from '@mui/icons-material';
|
|
13
13
|
import { darken } from '@mui/material/styles';
|
|
14
14
|
import { styled } from '@mui/system';
|
|
15
15
|
import PropTypes from 'prop-types';
|
|
16
16
|
import FullScreen, { fullScreenSupported } from 'react-request-fullscreen';
|
|
17
|
-
import ElementSearchDialog from '../ElementSearchDialog';
|
|
18
17
|
import GridLogo from './GridLogo';
|
|
19
18
|
import AboutDialog from './AboutDialog';
|
|
20
19
|
var styles = {
|
|
@@ -23,9 +22,8 @@ var styles = {
|
|
|
23
22
|
display: 'flex',
|
|
24
23
|
overflow: 'hidden'
|
|
25
24
|
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
height: 24
|
|
25
|
+
menuContainer: {
|
|
26
|
+
marginLeft: 1
|
|
29
27
|
},
|
|
30
28
|
link: {
|
|
31
29
|
textDecoration: 'none',
|
|
@@ -134,23 +132,14 @@ var TopBar = function TopBar(_ref2) {
|
|
|
134
132
|
children = _ref2.children,
|
|
135
133
|
appsAndUrls = _ref2.appsAndUrls,
|
|
136
134
|
onAboutClick = _ref2.onAboutClick,
|
|
137
|
-
|
|
138
|
-
|
|
135
|
+
globalVersionPromise = _ref2.globalVersionPromise,
|
|
136
|
+
additionalModulesPromise = _ref2.additionalModulesPromise,
|
|
139
137
|
onThemeClick = _ref2.onThemeClick,
|
|
140
138
|
theme = _ref2.theme,
|
|
141
139
|
onEquipmentLabellingClick = _ref2.onEquipmentLabellingClick,
|
|
142
140
|
equipmentLabelling = _ref2.equipmentLabelling,
|
|
143
|
-
withElementsSearch = _ref2.withElementsSearch,
|
|
144
|
-
searchDisabled = _ref2.searchDisabled,
|
|
145
|
-
searchingLabel = _ref2.searchingLabel,
|
|
146
|
-
onSearchTermChange = _ref2.onSearchTermChange,
|
|
147
|
-
_onSelectionChange = _ref2.onSelectionChange,
|
|
148
|
-
elementsFound = _ref2.elementsFound,
|
|
149
|
-
renderElement = _ref2.renderElement,
|
|
150
141
|
onLanguageClick = _ref2.onLanguageClick,
|
|
151
|
-
language = _ref2.language
|
|
152
|
-
searchTermDisabled = _ref2.searchTermDisabled,
|
|
153
|
-
searchTermDisableReason = _ref2.searchTermDisableReason;
|
|
142
|
+
language = _ref2.language;
|
|
154
143
|
var _React$useState = React.useState(null),
|
|
155
144
|
anchorElSettingsMenu = _React$useState[0],
|
|
156
145
|
setAnchorElSettingsMenu = _React$useState[1];
|
|
@@ -161,12 +150,6 @@ var TopBar = function TopBar(_ref2) {
|
|
|
161
150
|
var _useState = useState(false),
|
|
162
151
|
isFullScreen = _useState[0],
|
|
163
152
|
setIsFullScreen = _useState[1];
|
|
164
|
-
var _useState2 = useState(false),
|
|
165
|
-
isDialogSearchOpen = _useState2[0],
|
|
166
|
-
setDialogSearchOpen = _useState2[1];
|
|
167
|
-
var handleClickElementSearch = function handleClickElementSearch() {
|
|
168
|
-
setDialogSearchOpen(true);
|
|
169
|
-
};
|
|
170
153
|
var handleToggleSettingsMenu = function handleToggleSettingsMenu(event) {
|
|
171
154
|
setAnchorElSettingsMenu(event.currentTarget);
|
|
172
155
|
};
|
|
@@ -218,9 +201,9 @@ var TopBar = function TopBar(_ref2) {
|
|
|
218
201
|
onLanguageClick(value);
|
|
219
202
|
}
|
|
220
203
|
};
|
|
221
|
-
var
|
|
222
|
-
isAboutDialogOpen =
|
|
223
|
-
setAboutDialogOpen =
|
|
204
|
+
var _useState2 = useState(false),
|
|
205
|
+
isAboutDialogOpen = _useState2[0],
|
|
206
|
+
setAboutDialogOpen = _useState2[1];
|
|
224
207
|
var onAboutClicked = function onAboutClicked() {
|
|
225
208
|
setAnchorElSettingsMenu(false);
|
|
226
209
|
if (onAboutClick) {
|
|
@@ -229,20 +212,6 @@ var TopBar = function TopBar(_ref2) {
|
|
|
229
212
|
setAboutDialogOpen(true);
|
|
230
213
|
}
|
|
231
214
|
};
|
|
232
|
-
useEffect(function () {
|
|
233
|
-
if (user && withElementsSearch && !searchDisabled) {
|
|
234
|
-
var openSearch = function openSearch(e) {
|
|
235
|
-
if (e.ctrlKey && e.shiftKey && (e.key === 'F' || e.key === 'f')) {
|
|
236
|
-
e.preventDefault();
|
|
237
|
-
setDialogSearchOpen(true);
|
|
238
|
-
}
|
|
239
|
-
};
|
|
240
|
-
document.addEventListener('keydown', openSearch);
|
|
241
|
-
return function () {
|
|
242
|
-
return document.removeEventListener('keydown', openSearch);
|
|
243
|
-
};
|
|
244
|
-
}
|
|
245
|
-
}, [user, withElementsSearch, searchDisabled]);
|
|
246
215
|
var logo_clickable = useMemo(function () {
|
|
247
216
|
return /*#__PURE__*/React.createElement(GridLogo, {
|
|
248
217
|
onClick: onLogoClick,
|
|
@@ -263,26 +232,8 @@ var TopBar = function TopBar(_ref2) {
|
|
|
263
232
|
}
|
|
264
233
|
}), /*#__PURE__*/React.createElement(Toolbar, null, logo_clickable, /*#__PURE__*/React.createElement(Box, {
|
|
265
234
|
sx: styles.grow
|
|
266
|
-
}, children), user &&
|
|
267
|
-
|
|
268
|
-
onClose: function onClose() {
|
|
269
|
-
return setDialogSearchOpen(false);
|
|
270
|
-
},
|
|
271
|
-
searchingLabel: searchingLabel,
|
|
272
|
-
onSearchTermChange: onSearchTermChange,
|
|
273
|
-
onSelectionChange: function onSelectionChange(element) {
|
|
274
|
-
setDialogSearchOpen(false);
|
|
275
|
-
_onSelectionChange(element);
|
|
276
|
-
},
|
|
277
|
-
elementsFound: elementsFound,
|
|
278
|
-
renderElement: renderElement,
|
|
279
|
-
searchTermDisabled: searchTermDisabled,
|
|
280
|
-
searchTermDisableReason: searchTermDisableReason
|
|
281
|
-
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
|
|
282
|
-
color: "inherit",
|
|
283
|
-
onClick: handleClickElementSearch,
|
|
284
|
-
disabled: searchDisabled
|
|
285
|
-
}, /*#__PURE__*/React.createElement(SearchIcon, null)))), user && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
|
|
235
|
+
}, children), user && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
236
|
+
"aria-label": "apps",
|
|
286
237
|
"aria-controls": "apps-menu",
|
|
287
238
|
"aria-haspopup": "true",
|
|
288
239
|
onClick: handleClickAppsMenu,
|
|
@@ -315,7 +266,9 @@ var TopBar = function TopBar(_ref2) {
|
|
|
315
266
|
fontWeight: 'bold'
|
|
316
267
|
}
|
|
317
268
|
}, item.name))));
|
|
318
|
-
}))), user && /*#__PURE__*/React.createElement(
|
|
269
|
+
}))), user && /*#__PURE__*/React.createElement(Box, {
|
|
270
|
+
sx: styles.menuContainerg
|
|
271
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
319
272
|
"aria-controls": "settings-menu",
|
|
320
273
|
"aria-haspopup": "true",
|
|
321
274
|
sx: styles.showHideMenu,
|
|
@@ -449,8 +402,7 @@ var TopBar = function TopBar(_ref2) {
|
|
|
449
402
|
value: LANG_FRENCH,
|
|
450
403
|
"aria-label": LANG_FRENCH,
|
|
451
404
|
sx: styles.toggleButton
|
|
452
|
-
}, FR))), /*#__PURE__*/React.createElement(StyledMenuItem, {
|
|
453
|
-
disabled: !onParametersClick,
|
|
405
|
+
}, FR))), onParametersClick && /*#__PURE__*/React.createElement(StyledMenuItem, {
|
|
454
406
|
onClick: onParametersClicked,
|
|
455
407
|
sx: styles.borderTop
|
|
456
408
|
}, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(SettingsIcon, {
|
|
@@ -506,8 +458,8 @@ var TopBar = function TopBar(_ref2) {
|
|
|
506
458
|
appName: appName,
|
|
507
459
|
appVersion: appVersion,
|
|
508
460
|
appLicense: appLicense,
|
|
509
|
-
|
|
510
|
-
|
|
461
|
+
globalVersionPromise: globalVersionPromise,
|
|
462
|
+
additionalModulesPromise: additionalModulesPromise
|
|
511
463
|
})));
|
|
512
464
|
};
|
|
513
465
|
TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -525,20 +477,11 @@ TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
525
477
|
onThemeClick: PropTypes.func,
|
|
526
478
|
theme: PropTypes.string,
|
|
527
479
|
onAboutClick: PropTypes.func,
|
|
528
|
-
|
|
529
|
-
|
|
480
|
+
globalVersionPromise: PropTypes.func,
|
|
481
|
+
additionalModulesPromise: PropTypes.func,
|
|
530
482
|
onEquipmentLabellingClick: PropTypes.func,
|
|
531
483
|
equipmentLabelling: PropTypes.bool,
|
|
532
|
-
withElementsSearch: PropTypes.bool,
|
|
533
|
-
searchDisabled: PropTypes.bool,
|
|
534
|
-
searchingLabel: PropTypes.string,
|
|
535
|
-
onSearchTermChange: PropTypes.func,
|
|
536
|
-
onSelectionChange: PropTypes.func,
|
|
537
|
-
elementsFound: PropTypes.array,
|
|
538
|
-
renderElement: PropTypes.func.isRequired,
|
|
539
484
|
onLanguageClick: PropTypes.func.isRequired,
|
|
540
|
-
language: PropTypes.string.isRequired
|
|
541
|
-
searchTermDisabled: PropTypes.bool,
|
|
542
|
-
searchTermDisableReason: PropTypes.string
|
|
485
|
+
language: PropTypes.string.isRequired
|
|
543
486
|
} : {};
|
|
544
487
|
export default TopBar;
|
|
@@ -18,10 +18,15 @@ var top_bar_en = {
|
|
|
18
18
|
'top-bar/language': 'Language',
|
|
19
19
|
'top-bar/customTheme': 'Custom theme',
|
|
20
20
|
'about-dialog/title': 'About',
|
|
21
|
-
'about-dialog/version': 'Version',
|
|
21
|
+
'about-dialog/version': 'Version {version}',
|
|
22
22
|
'about-dialog/alert-running-old-version-msg': 'Running old version.\nSave your work and refresh the application to load the latest version.',
|
|
23
23
|
'about-dialog/license': 'License',
|
|
24
24
|
'about-dialog/modules-section': 'Modules details',
|
|
25
|
-
'about-dialog/
|
|
25
|
+
'about-dialog/label-version': 'Version',
|
|
26
|
+
'about-dialog/label-git-version': 'Tag',
|
|
27
|
+
'about-dialog/label-type': 'Type',
|
|
28
|
+
'about-dialog/module-tooltip-app': 'application',
|
|
29
|
+
'about-dialog/module-tooltip-server': 'server',
|
|
30
|
+
'about-dialog/module-tooltip-other': 'other'
|
|
26
31
|
};
|
|
27
32
|
export default top_bar_en;
|
|
@@ -18,10 +18,15 @@ var top_bar_fr = {
|
|
|
18
18
|
'top-bar/language': 'Langue',
|
|
19
19
|
'top-bar/customTheme': 'Choix de theme',
|
|
20
20
|
'about-dialog/title': 'À propos',
|
|
21
|
-
'about-dialog/version': 'Version',
|
|
21
|
+
'about-dialog/version': 'Version {version}',
|
|
22
22
|
'about-dialog/alert-running-old-version-msg': "Ancienne version de l'application.\nVeuillez sauvegarder votre travail et rafraîchir l'application pour charger la dernière version",
|
|
23
23
|
'about-dialog/license': 'Licence',
|
|
24
24
|
'about-dialog/modules-section': 'Détails des modules',
|
|
25
|
-
'about-dialog/
|
|
25
|
+
'about-dialog/label-version': 'Version',
|
|
26
|
+
'about-dialog/label-git-version': 'Tag',
|
|
27
|
+
'about-dialog/label-type': 'Type',
|
|
28
|
+
'about-dialog/module-tooltip-app': 'application',
|
|
29
|
+
'about-dialog/module-tooltip-server': 'serveur',
|
|
30
|
+
'about-dialog/module-tooltip-other': 'autre'
|
|
26
31
|
};
|
|
27
32
|
export default top_bar_fr;
|