Develop

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.7](https://github.com/eea/eionet2-user-management/compare/1.1.6...1.1.7) - 8 September 2023
+
+#### :rocket: New Features
+
+- feat: version message(#253457) [Mihai Nicolae - [`d28dbf3`](https://github.com/eea/eionet2-user-management/commit/d28dbf30aa162392a24ef6ac4311b7b498c92d5d)]
+
+#### :house: Internal changes
+
+- chore: version [Mihai Nicolae - [`9754048`](https://github.com/eea/eionet2-user-management/commit/9754048b4bb06e2775f8937781676d9065ec95ff)]
+- chore: manifest [Mihai Nicolae - [`5b16974`](https://github.com/eea/eionet2-user-management/commit/5b1697455aee798faa407ce55c6b378189363b11)]
+
 ### [1.1.6](https://github.com/eea/eionet2-user-management/compare/1.1.5...1.1.6) - 17 August 2023
 
 #### :bug: Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "eionet2-user-management",
-    "version": "1.1.6",
+    "version": "1.1.7",
     "description": "",
     "author": "",
     "scripts": {

tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/eionet2-user-management",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "license": "MIT",
   "description": "Teams app for managing Eionet users.",
   "dependencies": {
@@ -85,4 +85,4 @@
     ]
   },
   "homepage": "."
-}
+}

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>
+  );
+}

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(''),
@@ -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>
               )}

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,13 @@ 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,6 +55,7 @@ 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) => {
@@ -280,6 +284,9 @@ export function UserList({ userInfo }) {
 
       setSnackbarOpen(false);
     },
+    handleVersionDialogClose = () => {
+      setVersionDialogOpen(false);
+    },
     onFilterValueChanged = (value) => {
       setFilterValue(value);
       if (!value || (value && value.length < 2)) {
@@ -334,6 +341,8 @@ export function UserList({ userInfo }) {
     },
   ];
 
+  const version = process.env.REACT_APP_VERSION;
+
   useEffect(() => {
     (async () => {
       setloading(true);
@@ -347,6 +356,8 @@ export function UserList({ userInfo }) {
         setFilteredUsers(invitedUsers);
       }
 
+      !!loadedConfiguration.UserManagementVersion &&
+        setVersionDialogOpen(loadedConfiguration.UserManagementVersion != version);
       setloading(false);
     })();
   }, []);
@@ -365,6 +376,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}

templates/appPackage/manifest.template.json

@@ -1,11 +1,11 @@
 {
     "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.11/MicrosoftTeams.schema.json",
     "manifestVersion": "1.11",
-    "version": "1.1.21",
+    "version": "1.1.22",
     "id": "{{state.fx-resource-appstudio.teamsAppId}}",
     "packageName": "com.microsoft.teams.extension",
     "developer": {
-        "name": "Teams App, Inc.",
+        "name": "European Environment Agency",
         "websiteUrl": "{{{state.fx-resource-frontend-hosting.endpoint}}}",
         "privacyUrl": "{{{state.fx-resource-frontend-hosting.endpoint}}}/index.html#/privacy",
         "termsOfUseUrl": "{{{state.fx-resource-frontend-hosting.endpoint}}}/index.html#/termsofuse"