feat: version message(#253457)

eea · Sep 8, 2023 · d28dbf3 · d28dbf3
1 parent 5b16974
commit d28dbf3
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 102 deletions.
diff --git a/tabs/src/components/HtmlBox.jsx b/tabs/src/components/HtmlBox.jsx
@@ -0,0 +1,26 @@
+import { React } from 'react';
+import { Box } from '@mui/material';
+import DOMPurify from 'dompurify';
+
+DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+  // set all elements owning target to target=_blank
+  if ('target' in node) {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener');
+  }
+});
+
+export function HtmlBox({ html }) {
+  return (
+    <div>
+      {html && (
+        <Box
+          sx={{ width: '90%' }}
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(html),
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/tabs/src/components/UserInvite.jsx b/tabs/src/components/UserInvite.jsx
@@ -1,5 +1,4 @@
 import { React, useState, useEffect } from 'react';
-import DOMPurify from 'dompurify';
 import { getUserByMail, inviteUser } from '../data/provider';
 import { getMappingsList } from '../data/sharepointProvider';
 import messages from '../data/messages.json';
@@ -9,6 +8,7 @@ import { UserEdit } from './UserEdit';
 import { Box, CircularProgress, Alert, TextField, Button } from '@mui/material';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import GroupAddIcon from '@mui/icons-material/GroupAdd';
+import { HtmlBox } from './HtmlBox';
 
 export function UserInvite({ userInfo, refreshList, configuration }) {
   const [inputEmail, setInputEmail] = useState(''),
@@ -49,11 +49,11 @@ export function UserInvite({ userInfo, refreshList, configuration }) {
   }, [selectedUser, userInfo]);
 
   const onInputEmailChange = (e) => {
-      setInputEmail(e.target.value);
-      setSelectedUser(defaultUser);
-      setWarningVisible(false);
-      setFormVisible(false);
-    },
+    setInputEmail(e.target.value);
+    setSelectedUser(defaultUser);
+    setWarningVisible(false);
+    setFormVisible(false);
+  },
     onCheckEmail = async () => {
       setFormVisible(false);
       setLoading(true);
@@ -147,12 +147,7 @@ export function UserInvite({ userInfo, refreshList, configuration }) {
               {warningVisible && (
                 <div className="row">
                   <Alert severity="error" className="note-label warning">
-                    <Box
-                      sx={{ width: '100%' }}
-                      dangerouslySetInnerHTML={{
-                        __html: DOMPurify.sanitize(warningText),
-                      }}
-                    />
+                    <HtmlBox html={warningText}></HtmlBox>
                   </Alert>
                 </div>
               )}

diff --git a/tabs/src/components/UserList.jsx b/tabs/src/components/UserList.jsx
@@ -20,6 +20,7 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
+
 import CloseIcon from '@mui/icons-material/Close';
 import CreateIcon from '@mui/icons-material/Create';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -30,11 +31,14 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import WarningIcon from '@mui/icons-material/Warning';
 import ClearIcon from '@mui/icons-material/Clear';
 import PersonRemove from '@mui/icons-material/PersonRemoveAlt1';
+
 import { UserEdit } from './UserEdit';
 import { UserInvite } from './UserInvite';
 import Snack from './Snack';
 import DeleteDialog from './DeleteDialog';
 import ResizableGrid from './ResizableGrid';
+import { HtmlBox } from './HtmlBox';
+
 
 export function UserList({ userInfo }) {
   const isMobile = useMediaQuery({ query: `(max-width: 760px)` });
@@ -52,104 +56,105 @@ export function UserList({ userInfo }) {
   const [deleteAlertOpen, setDeleteAlertOpen] = useState(false),
     [deleteMembershipAlertOpen, setDeleteMembershipAlertOpen] = useState(false),
     [snackbarMessage, setSnackbarMessage] = useState(''),
+    [versionDialogOpen, setVersionDialogOpen] = useState(false),
     [snackbarOpen, setSnackbarOpen] = useState(false);
 
   const renderButtons = (params) => {
-      const user = params.row;
-      const showEdit = user && (!userInfo.isNFP || (userInfo.isNFP && !user.EEANominated)),
-        showRemoveMemberships =
-          user &&
-          userInfo.isNFP &&
-          !user.EEANominated &&
-          (user.OtherMemberships?.length > 0 || user.NFP) &&
-          user.Membership?.length > 0,
-        showRemoveUser =
-          user &&
-          ((userInfo.isNFP && !user.OtherMemberships?.length && !user.NFP && !user.EEANominated) ||
-            userInfo.isAdmin);
-      return (
-        <div className="row">
-          <strong>
-            {showEdit && (
-              <Tooltip title="Edit">
-                <IconButton
-                  variant="contained"
-                  color="secondary"
-                  size="small"
-                  onClick={async () => {
-                    setFormVisible(false);
-                    let missingUser = user.ADUserId === undefined;
-                    if (user.ADUserId) {
-                      const userDetails = await getUser(user.ADUserId);
-                      missingUser = userDetails === undefined;
-                      if (userDetails) {
-                        user.FirstName = userDetails.givenName;
-                        user.LastName = userDetails.surname;
-                        setSelectedUser(user);
-                        setFormVisible(true);
-                      }
-                    }
-                    setAlertOpen(missingUser);
-                    missingUser && logInfo(messages.UserList.MissingADUser, '', user, 'Edit user');
-                  }}
-                >
-                  <CreateIcon />
-                </IconButton>
-              </Tooltip>
-            )}
-            {showRemoveUser && (
-              <Tooltip title="Remove">
-                <IconButton
-                  variant="contained"
-                  color="secondary"
-                  size="small"
-                  onClick={async () => {
-                    setFormVisible(false);
-                    if (user.ADUserId) {
-                      const userDetails = await getUser(user.ADUserId),
-                        groupsString = await getUserGroups(user.ADUserId);
-
+    const user = params.row;
+    const showEdit = user && (!userInfo.isNFP || (userInfo.isNFP && !user.EEANominated)),
+      showRemoveMemberships =
+        user &&
+        userInfo.isNFP &&
+        !user.EEANominated &&
+        (user.OtherMemberships?.length > 0 || user.NFP) &&
+        user.Membership?.length > 0,
+      showRemoveUser =
+        user &&
+        ((userInfo.isNFP && !user.OtherMemberships?.length && !user.NFP && !user.EEANominated) ||
+          userInfo.isAdmin);
+    return (
+      <div className="row">
+        <strong>
+          {showEdit && (
+            <Tooltip title="Edit">
+              <IconButton
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={async () => {
+                  setFormVisible(false);
+                  let missingUser = user.ADUserId === undefined;
+                  if (user.ADUserId) {
+                    const userDetails = await getUser(user.ADUserId);
+                    missingUser = userDetails === undefined;
+                    if (userDetails) {
                       user.FirstName = userDetails.givenName;
                       user.LastName = userDetails.surname;
-                      user.groupsString = groupsString;
+                      setSelectedUser(user);
+                      setFormVisible(true);
                     }
-                    setSelectedUser(user);
-                    setDeleteAlertOpen(true);
-                  }}
-                >
-                  <DeleteIcon />
-                </IconButton>
-              </Tooltip>
-            )}
+                  }
+                  setAlertOpen(missingUser);
+                  missingUser && logInfo(messages.UserList.MissingADUser, '', user, 'Edit user');
+                }}
+              >
+                <CreateIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          {showRemoveUser && (
+            <Tooltip title="Remove">
+              <IconButton
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={async () => {
+                  setFormVisible(false);
+                  if (user.ADUserId) {
+                    const userDetails = await getUser(user.ADUserId),
+                      groupsString = await getUserGroups(user.ADUserId);
 
-            {showRemoveMemberships && (
-              <Tooltip title="Remove Eionet memberships">
-                <IconButton
-                  variant="contained"
-                  color="secondary"
-                  size="small"
-                  onClick={async () => {
-                    setFormVisible(false);
-                    if (user.ADUserId) {
-                      const userDetails = await getUser(user.ADUserId),
-                        groupsString = await getUserGroups(user.ADUserId);
+                    user.FirstName = userDetails.givenName;
+                    user.LastName = userDetails.surname;
+                    user.groupsString = groupsString;
+                  }
+                  setSelectedUser(user);
+                  setDeleteAlertOpen(true);
+                }}
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+          )}
 
-                      user.FirstName = userDetails.givenName;
-                      user.LastName = userDetails.surname;
-                      user.groupsString = groupsString;
-                    }
-                    setSelectedUser(user);
-                    setDeleteMembershipAlertOpen(true);
-                  }}
-                >
-                  <PersonRemove />
-                </IconButton>
-              </Tooltip>
-            )}
-          </strong>
-        </div>
-      );
-    },
+          {showRemoveMemberships && (
+            <Tooltip title="Remove Eionet memberships">
+              <IconButton
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={async () => {
+                  setFormVisible(false);
+                  if (user.ADUserId) {
+                    const userDetails = await getUser(user.ADUserId),
+                      groupsString = await getUserGroups(user.ADUserId);
+
+                    user.FirstName = userDetails.givenName;
+                    user.LastName = userDetails.surname;
+                    user.groupsString = groupsString;
+                  }
+                  setSelectedUser(user);
+                  setDeleteMembershipAlertOpen(true);
+                }}
+              >
+                <PersonRemove />
+              </IconButton>
+            </Tooltip>
+          )}
+        </strong>
+      </div>
+    );
+  },
     handleAlertClose = (_event, reason) => {
       if (reason === 'clickaway') {
         return;
@@ -280,6 +285,9 @@ export function UserList({ userInfo }) {
 
       setSnackbarOpen(false);
     },
+    handleVersionDialogClose = () => {
+      setVersionDialogOpen(false);
+    },
     onFilterValueChanged = (value) => {
       setFilterValue(value);
       if (!value || (value && value.length < 2)) {
@@ -334,6 +342,8 @@ export function UserList({ userInfo }) {
     },
   ];
 
+  const version = process.env.REACT_APP_VERSION;
+
   useEffect(() => {
     (async () => {
       setloading(true);
@@ -347,6 +357,8 @@ export function UserList({ userInfo }) {
         setFilteredUsers(invitedUsers);
       }
 
+      !!loadedConfiguration.UserManagementVersion &&
+        setVersionDialogOpen(loadedConfiguration.UserManagementVersion != version);
       setloading(false);
     })();
   }, []);
@@ -365,6 +377,26 @@ export function UserList({ userInfo }) {
         >
           <CircularProgress color="inherit" />
         </Backdrop>
+        <Dialog open={versionDialogOpen} onClose={handleVersionDialogClose}>
+          <DialogTitle>
+            <IconButton
+              aria-label="close"
+              onClick={handleVersionDialogClose}
+              sx={{
+                position: 'absolute',
+                right: 8,
+                top: 8,
+                color: (theme) => theme.palette.grey[500],
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+            <Typography>Application version</Typography>
+          </DialogTitle>
+          <Box sx={{ margin: '2rem' }}>
+            <HtmlBox html={configuration?.AppVersionMessage}></HtmlBox>
+          </Box>
+        </Dialog>
         <Dialog open={searchOpen} onClose={handleSearchClose} maxWidth="xl">
           <Alert onClose={handleSearchClose} severity="info" sx={{ width: '100%' }}>
             {configuration.UserListSearchInfo}