npm - eionet2-dashboard - Versions diffs - 1.4.0 - Mend

eionet2-dashboard 1.4.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.

Files changed (111) hide show

package/.fx/configs/azure.parameters.Prod_EEA.json +15 -0
package/.fx/configs/azure.parameters.dev.json +15 -0
package/.fx/configs/config.Prod_EEA.json +10 -0
package/.fx/configs/config.dev.json +10 -0
package/.fx/configs/projectSettings.json +83 -0
package/.fx/states/state.Prod_EEA.json +47 -0
package/.fx/states/state.dev.json +47 -0
package/.vscode/launch.json +91 -0
package/.vscode/settings.json +6 -0
package/.vscode/tasks.json +63 -0
package/CHANGELOG.md +140 -0
package/Jenkinsfile +166 -0
package/LICENSE.md +9 -0
package/README.md +55 -0
package/api/.funcignore +11 -0
package/api/extensions.csproj +11 -0
package/api/getGraphData/function.json +27 -0
package/api/getGraphData/index.js +147 -0
package/api/host.json +11 -0
package/api/package-lock.json +1546 -0
package/api/package.json +17 -0
package/api/proxies.json +4 -0
package/package.json +25 -0
package/tabs/.env.teamsfx.Prod_EEA +11 -0
package/tabs/.env.teamsfx.dev +11 -0
package/tabs/.eslintrc.json +48 -0
package/tabs/.prettierrc +7 -0
package/tabs/.stylelintrc.json +6 -0
package/tabs/babel.config.js +3 -0
package/tabs/package-lock.json +15564 -0
package/tabs/package.json +88 -0
package/tabs/public/auth-end.html +76 -0
package/tabs/public/auth-start.html +178 -0
package/tabs/public/deploy.png +0 -0
package/tabs/public/favicon.ico +0 -0
package/tabs/public/hello.png +0 -0
package/tabs/public/index.html +20 -0
package/tabs/public/publish.png +0 -0
package/tabs/src/components/App.jsx +36 -0
package/tabs/src/components/CustomColumnResizeIcon.jsx +68 -0
package/tabs/src/components/CustomDrawer.jsx +51 -0
package/tabs/src/components/EventDialogTitle.jsx +29 -0
package/tabs/src/components/HtmlBox.jsx +18 -0
package/tabs/src/components/Privacy.jsx +17 -0
package/tabs/src/components/ResizableGrid.jsx +44 -0
package/tabs/src/components/Tab.jsx +477 -0
package/tabs/src/components/Tab.scss +138 -0
package/tabs/src/components/TabConfig.jsx +51 -0
package/tabs/src/components/TabPanel.jsx +29 -0
package/tabs/src/components/TermsOfUse.jsx +17 -0
package/tabs/src/components/UnderConstruction.jsx +24 -0
package/tabs/src/components/UserMenu.jsx +109 -0
package/tabs/src/components/_variables.scss +10 -0
package/tabs/src/components/activity/Activity.jsx +301 -0
package/tabs/src/components/activity/ConsultationList.jsx +297 -0
package/tabs/src/components/activity/EventList.jsx +463 -0
package/tabs/src/components/activity/GroupsTags.jsx +26 -0
package/tabs/src/components/activity/Reporting.jsx +13 -0
package/tabs/src/components/activity/activity.scss +153 -0
package/tabs/src/components/event_rating/EventRating.jsx +92 -0
package/tabs/src/components/event_rating/EventRatingDialog.jsx +46 -0
package/tabs/src/components/event_registration/Approval.jsx +80 -0
package/tabs/src/components/event_registration/ApprovalDialog.jsx +30 -0
package/tabs/src/components/event_registration/ApprovalList.jsx +62 -0
package/tabs/src/components/event_registration/EventRegistration.jsx +214 -0
package/tabs/src/components/lib/useData.js +33 -0
package/tabs/src/components/lib/useGraph.js +39 -0
package/tabs/src/components/lib/useTeamsFx.js +55 -0
package/tabs/src/components/my_country/AtAGlance.jsx +151 -0
package/tabs/src/components/my_country/CountryProgress.jsx +92 -0
package/tabs/src/components/my_country/DataReporters.jsx +13 -0
package/tabs/src/components/my_country/GroupView.jsx +54 -0
package/tabs/src/components/my_country/GroupsBoard.jsx +52 -0
package/tabs/src/components/my_country/IndicatorCard.jsx +60 -0
package/tabs/src/components/my_country/ManagementBoard.jsx +109 -0
package/tabs/src/components/my_country/MyCountry.jsx +186 -0
package/tabs/src/components/my_country/ProgressGauge.jsx +125 -0
package/tabs/src/components/my_country/ScientificCommittee.jsx +13 -0
package/tabs/src/components/my_country/YearlyProgress.jsx +41 -0
package/tabs/src/components/my_country/my_country.scss +81 -0
package/tabs/src/components/publications/Publications.jsx +13 -0
package/tabs/src/components/self_service/UserEdit.jsx +334 -0
package/tabs/src/components/self_service/UserEdit.scss +107 -0
package/tabs/src/data/apiProvider.js +153 -0
package/tabs/src/data/constants.json +7 -0
package/tabs/src/data/hooks/useConfiguration.js +18 -0
package/tabs/src/data/icsHelper.js +38 -0
package/tabs/src/data/messages.json +39 -0
package/tabs/src/data/provider.js +199 -0
package/tabs/src/data/selfServiceProvider.js +59 -0
package/tabs/src/data/selfServiceSharepointProvider.js +68 -0
package/tabs/src/data/sharepointProvider.js +729 -0
package/tabs/src/data/validator.js +25 -0
package/tabs/src/data/validator.test.js +9 -0
package/tabs/src/index.css +16 -0
package/tabs/src/index.jsx +6 -0
package/tabs/src/static/images/teams-icon.svg +1 -0
package/tabs/src/utils/uiHelper.js +6 -0
package/templates/appPackage/aad.template.json +133 -0
package/templates/appPackage/manifest.template.json +58 -0
package/templates/appPackage/resources/color.png +0 -0
package/templates/appPackage/resources/outline.png +0 -0
package/templates/azure/config.bicep +27 -0
package/templates/azure/main.bicep +20 -0
package/templates/azure/provision/frontendHosting.bicep +23 -0
package/templates/azure/provision/function.bicep +82 -0
package/templates/azure/provision/identity.bicep +14 -0
package/templates/azure/provision/simpleAuth.bicep +44 -0
package/templates/azure/provision.bicep +58 -0
package/templates/azure/teamsFx/function.bicep +76 -0
package/templates/azure/teamsFx/simpleAuth.bicep +43 -0

package/tabs/package.json ADDED Viewed

@@ -0,0 +1,88 @@
+{
+  "name": "@eeacms/eionet2-dashboard",
+  "version": "1.4.0",
+  "license": "MIT",
+  "description": "Teams app for managing Eionet users.",
+  "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@fluentui/react-northstar": "^0.54.0",
+    "@microsoft/teams-js": "^1.9.0",
+    "@microsoft/teamsfx": "^0.5.0",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "^5.5.1",
+    "@mui/x-data-grid": "^5.6.1",
+    "axios": "^0.26.1",
+    "date-fns": "^2.29.3",
+    "dompurify": "^3.0.0",
+    "ics": "^3.1.0",
+    "msteams-react-base-component": "^3.1.0",
+    "node-sass": "^8.0.0",
+    "postcss-scss": "^4.0.6",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "^5.0.1",
+    "validator": "^13.7.0"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "env-cmd": "^10.1.0",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest-junit": "^14.0.0",
+    "prettier": "^2.6.2",
+    "stylelint": "^14.8.5",
+    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-prettier": "^2.0.0"
+  },
+  "scripts": {
+    "prepare": "npm run build",
+    "test": "jest",
+    "dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start",
+    "start": "cross-env REACT_APP_VERSION=$npm_package_version GENERATE_SOURCEMAP=false react-scripts start",
+    "install:teamsfx": "npm install",
+    "build": "cross-env REACT_APP_VERSION=$npm_package_version GENERATE_SOURCEMAP=false react-scripts build",
+    "build:teamsfx": "cross-env-shell \"env-cmd -f .env.teamsfx.${TEAMS_FX_ENV} npm run build\"",
+    "build:teamsfx:dev": "cross-env TEAMS_FX_ENV=dev npm run build:teamsfx",
+    "eject": "react-scripts eject",
+    "stylelint": "node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,scss}'",
+    "stylelint:fix": "yarn stylelint --fix",
+    "prettier": "node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,scss,md}'",
+    "prettier:fix": "node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,scss,md}'",
+    "lint": "node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
+    "lint:fix": "node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'",
+    "pc": "npm run stylelint:fix & npm run prettier:fix & npm run lint:fix & npm run test"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
+    ]
+  },
+  "homepage": "."
+}

package/tabs/public/auth-end.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
+<!--If you're not familiar with this, do not alter or remove this file from your project.-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Login End Page</title>
+  <meta charset="utf-8" />
+</head>
+<body>
+  <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
+    integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+    crossorigin="anonymous"></script>
+  <script type="text/javascript">
+    microsoftTeams.initialize();
+    let hashParams = getHashParameters();
+    if (hashParams["error"]) {
+      // Authentication failed
+      microsoftTeams.authentication.notifyFailure(
+        JSON.stringify({
+          error: hashParams["error"],
+          message: JSON.stringify(hashParams),
+        })
+      );
+    } else if (hashParams["code"]) {
+      // Get the stored state parameter and compare with incoming state
+      let expectedState = localStorage.getItem("state");
+      if (expectedState !== hashParams["state"]) {
+        // State does not match, report error
+        microsoftTeams.authentication.notifyFailure(
+          JSON.stringify({
+            error: "StateDoesNotMatch",
+            message: JSON.stringify(hashParams),
+          })
+        );
+      } else {
+        // Success -- return code information to the parent page.
+        var redirectUri = location.protocol + "//" + location.host + location.pathname;
+        var result = JSON.stringify({
+          code: hashParams["code"],
+          codeVerifier: localStorage.getItem("codeVerifier"),
+          redirectUri: redirectUri,
+        });
+        microsoftTeams.authentication.notifySuccess(result);
+      }
+    } else {
+      // Unexpected condition: hash does not contain error or access_token parameter
+      microsoftTeams.authentication.notifyFailure(
+        JSON.stringify({
+          error: "UnexpectedFailure",
+          message: JSON.stringify(hashParams),
+        })
+      );
+    }
+    // Parse hash parameters into key-value pairs
+    function getHashParameters() {
+      let hashParams = {};
+      location.hash
+        .substr(1)
+        .split("&")
+        .forEach(function (item) {
+          let s = item.split("="),
+            k = s[0],
+            v = s[1] && decodeURIComponent(s[1]);
+          hashParams[k] = v;
+        });
+      return hashParams;
+    }
+  </script>
+</body>
+</html>

package/tabs/public/auth-start.html ADDED Viewed

@@ -0,0 +1,178 @@
+<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
+<!--If you're not familiar with this, do not alter or remove this file from your project.-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Login Start Page</title>
+  <meta charset="utf-8" />
+</head>
+<body>
+  <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
+    integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+    crossorigin="anonymous"></script>
+  <script type="text/javascript">
+    microsoftTeams.initialize();
+    // Get the tab context, and use the information to navigate to Azure AD login page
+    microsoftTeams.getContext(async function (context) {
+      // Generate random state string and store it, so we can verify it in the callback
+      let state = _guid();
+      localStorage.setItem("state", state);
+      localStorage.removeItem("codeVerifier");
+      var currentURL = new URL(window.location);
+      var clientId = currentURL.searchParams.get("clientId");
+      var scope = currentURL.searchParams.get("scope");
+      var originalCode = _guid();
+      var codeChallenge = await pkceChallengeFromVerifier(originalCode);
+      localStorage.setItem("codeVerifier", originalCode);
+      let queryParams = {
+        client_id: clientId,
+        response_type: "code",
+        response_mode: "fragment",
+        scope: scope,
+        redirect_uri: window.location.origin + "/auth-end.html",
+        nonce: _guid(),
+        state: state,
+        login_hint: context.loginHint,
+        code_challenge: codeChallenge,
+        code_challenge_method: "S256",
+      };
+      let authorizeEndpoint = `https://login.microsoftonline.com/${context.tid
+        }/oauth2/v2.0/authorize?${toQueryString(queryParams)}`;
+      window.location.assign(authorizeEndpoint);
+    });
+    // Build query string from map of query parameter
+    function toQueryString(queryParams) {
+      let encodedQueryParams = [];
+      for (let key in queryParams) {
+        encodedQueryParams.push(key + "=" + encodeURIComponent(queryParams[key]));
+      }
+      return encodedQueryParams.join("&");
+    }
+    // Converts decimal to hex equivalent
+    // (From ADAL.js: https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/lib/adal.js)
+    function _decimalToHex(number) {
+      var hex = number.toString(16);
+      while (hex.length < 2) {
+        hex = "0" + hex;
+      }
+      return hex;
+    }
+    // Generates RFC4122 version 4 guid (128 bits)
+    // (From ADAL.js: https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/lib/adal.js)
+    function _guid() {
+      // RFC4122: The version 4 UUID is meant for generating UUIDs from truly-random or
+      // pseudo-random numbers.
+      // The algorithm is as follows:
+      //     Set the two most significant bits (bits 6 and 7) of the
+      //        clock_seq_hi_and_reserved to zero and one, respectively.
+      //     Set the four most significant bits (bits 12 through 15) of the
+      //        time_hi_and_version field to the 4-bit version number from
+      //        Section 4.1.3. Version4
+      //     Set all the other bits to randomly (or pseudo-randomly) chosen
+      //     values.
+      // UUID                   = time-low "-" time-mid "-"time-high-and-version "-"clock-seq-reserved and low(2hexOctet)"-" node
+      // time-low               = 4hexOctet
+      // time-mid               = 2hexOctet
+      // time-high-and-version  = 2hexOctet
+      // clock-seq-and-reserved = hexOctet:
+      // clock-seq-low          = hexOctet
+      // node                   = 6hexOctet
+      // Format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
+      // y could be 1000, 1001, 1010, 1011 since most significant two bits needs to be 10
+      // y values are 8, 9, A, B
+      var cryptoObj = window.crypto || window.msCrypto; // for IE 11
+      if (cryptoObj && cryptoObj.getRandomValues) {
+        var buffer = new Uint8Array(16);
+        cryptoObj.getRandomValues(buffer);
+        //buffer[6] and buffer[7] represents the time_hi_and_version field. We will set the four most significant bits (4 through 7) of buffer[6] to represent decimal number 4 (UUID version number).
+        buffer[6] |= 0x40; //buffer[6] | 01000000 will set the 6 bit to 1.
+        buffer[6] &= 0x4f; //buffer[6] & 01001111 will set the 4, 5, and 7 bit to 0 such that bits 4-7 == 0100 = "4".
+        //buffer[8] represents the clock_seq_hi_and_reserved field. We will set the two most significant bits (6 and 7) of the clock_seq_hi_and_reserved to zero and one, respectively.
+        buffer[8] |= 0x80; //buffer[8] | 10000000 will set the 7 bit to 1.
+        buffer[8] &= 0xbf; //buffer[8] & 10111111 will set the 6 bit to 0.
+        return (
+          _decimalToHex(buffer[0]) +
+          _decimalToHex(buffer[1]) +
+          _decimalToHex(buffer[2]) +
+          _decimalToHex(buffer[3]) +
+          "-" +
+          _decimalToHex(buffer[4]) +
+          _decimalToHex(buffer[5]) +
+          "-" +
+          _decimalToHex(buffer[6]) +
+          _decimalToHex(buffer[7]) +
+          "-" +
+          _decimalToHex(buffer[8]) +
+          _decimalToHex(buffer[9]) +
+          "-" +
+          _decimalToHex(buffer[10]) +
+          _decimalToHex(buffer[11]) +
+          _decimalToHex(buffer[12]) +
+          _decimalToHex(buffer[13]) +
+          _decimalToHex(buffer[14]) +
+          _decimalToHex(buffer[15])
+        );
+      } else {
+        var guidHolder = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+        var hex = "0123456789abcdef";
+        var r = 0;
+        var guidResponse = "";
+        for (var i = 0; i < 36; i++) {
+          if (guidHolder[i] !== "-" && guidHolder[i] !== "4") {
+            // each x and y needs to be random
+            r = (Math.random() * 16) | 0;
+          }
+          if (guidHolder[i] === "x") {
+            guidResponse += hex[r];
+          } else if (guidHolder[i] === "y") {
+            // clock-seq-and-reserved first hex is filtered and remaining hex values are random
+            r &= 0x3; // bit and with 0011 to set pos 2 to zero ?0??
+            r |= 0x8; // set pos 3 to 1 as 1???
+            guidResponse += hex[r];
+          } else {
+            guidResponse += guidHolder[i];
+          }
+        }
+        return guidResponse;
+      }
+    }
+    // Calculate the SHA256 hash of the input text.
+    // Returns a promise that resolves to an ArrayBuffer
+    function sha256(plain) {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(plain);
+      return window.crypto.subtle.digest("SHA-256", data);
+    }
+    // Base64-urlencodes the input string
+    function base64urlencode(str) {
+      // Convert the ArrayBuffer to string using Uint8 array to convert to what btoa accepts.
+      // btoa accepts chars only within ascii 0-255 and base64 encodes them.
+      // Then convert the base64 encoded to base64url encoded
+      //   (replace + with -, replace / with _, trim trailing =)
+      return btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
+        .replace(/\+/g, "-")
+        .replace(/\//g, "_")
+        .replace(/=+$/, "");
+    }
+    // Return the base64-urlencoded sha256 hash for the PKCE challenge
+    async function pkceChallengeFromVerifier(v) {
+      hashed = await sha256(v);
+      return base64urlencode(hashed);
+    }
+  </script>
+</body>
+</html>

package/tabs/public/deploy.png ADDED Viewed

Binary file

package/tabs/public/favicon.ico ADDED Viewed

Binary file

package/tabs/public/hello.png ADDED Viewed

Binary file

package/tabs/public/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!--<!DOCTYPE html>-->
+<html lang="en" style="height: 100%;">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <title>Microsoft Teams Tab</title>
+</head>
+<body style="height: 100%;">
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root" style="min-height: 100%;"></div>
+</body>
+</html>

package/tabs/public/publish.png ADDED Viewed

Binary file

package/tabs/src/components/App.jsx ADDED Viewed

@@ -0,0 +1,36 @@
+import React from 'react';
+// https://fluentsite.z22.web.core.windows.net/quick-start
+import { Provider, teamsTheme, Loader } from '@fluentui/react-northstar';
+import { HashRouter as Router, Redirect, Route } from 'react-router-dom';
+import { useTeamsFx } from './lib/useTeamsFx';
+import Privacy from './Privacy';
+import TermsOfUse from './TermsOfUse';
+import TabConfig from './TabConfig';
+import Tab from './Tab';
+/**
+ * The main app which handles the initialization and routing
+ * of the app.
+ */
+export default function App() {
+  const { theme, loading } = useTeamsFx();
+  return (
+    <Provider theme={theme || teamsTheme}>
+      <Router>
+        <Route exact path="/">
+          <Redirect to="/tab" />
+        </Route>
+        {loading ? (
+          <Loader style={{ margin: 100 }} />
+        ) : (
+          <>
+            <Route exact path="/privacy" component={Privacy} />
+            <Route exact path="/termsofuse" component={TermsOfUse} />
+            <Route exact path="/tab" component={Tab} />
+            <Route exact path="/config" component={TabConfig} />
+          </>
+        )}
+      </Router>
+    </Provider>
+  );
+}

package/tabs/src/components/CustomColumnResizeIcon.jsx ADDED Viewed

@@ -0,0 +1,68 @@
+import { React, useCallback, useEffect, useState } from 'react';
+import { GridSeparatorIcon } from '@mui/x-data-grid';
+export default function CustomColumnResizeIcon({ onWidthChanged, id }) {
+  const headerSelector = "[role='columnheader'][tabindex='0']";
+  const [initialPos, setInitialPos] = useState(null),
+    [resizeInfo, setResizeInfo] = useState(null),
+    [initialSize, setInitialSize] = useState(null);
+  const initial = useCallback((e) => {
+    let resizable = id
+      ? document.getElementById(id).querySelector(headerSelector)
+      : document.querySelector(headerSelector);
+    setInitialPos(e.clientX);
+    setInitialSize(resizable.offsetWidth);
+  }, []);
+  const resize = useCallback(
+    (e) => {
+      const columnHeader = id
+          ? document.getElementById(id).querySelector(headerSelector)
+          : document.querySelector(headerSelector),
+        gridElement = columnHeader.closest('.MuiDataGrid-main'),
+        columnHeaderStyle = columnHeader.style,
+        cells = gridElement.querySelectorAll(
+          "[role='cell'][aria-colindex='" + columnHeader.ariaColIndex + "']",
+        );
+      const newWidth = parseInt(initialSize) + parseInt(e.clientX - initialPos);
+      if (newWidth > 0) {
+        for (let i = 0; i < cells.length; i++) {
+          const style = cells[i].style;
+          style.width = style.minWidth = style.maxWidth = `${newWidth}px`;
+        }
+        columnHeaderStyle.width =
+          columnHeaderStyle.minWidth =
+          columnHeaderStyle.maxWidth =
+            `${newWidth}px`;
+        setResizeInfo({
+          width: newWidth,
+          index: columnHeader.ariaColIndex - 1,
+        });
+      }
+    },
+    [initialSize, initialPos, id],
+  );
+  useEffect(() => {
+    let timeout;
+    if (resizeInfo) {
+      timeout = setTimeout(() => {
+        onWidthChanged && onWidthChanged(resizeInfo.width, resizeInfo.index);
+      }, 100);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [resizeInfo, onWidthChanged]);
+  return (
+    <div className="resizable" draggable onDragStart={initial} onDrag={resize}>
+      <GridSeparatorIcon />
+    </div>
+  );
+}

package/tabs/src/components/CustomDrawer.jsx ADDED Viewed

@@ -0,0 +1,51 @@
+import { React } from 'react';
+import { styled } from '@mui/material/styles';
+import MuiDrawer from '@mui/material/Drawer';
+export default function CustomDrawer({ drawerOptions }) {
+  const drawerWidth = 240;
+  const openedMixin = (theme) => ({
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    overflowX: 'hidden',
+  });
+  const closedMixin = (theme) => ({
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    overflowX: 'hidden',
+    width: `calc(${theme.spacing(7)} + 1px)`,
+    [theme.breakpoints.up('sm')]: {
+      width: `calc(${theme.spacing(8)} + 1px)`,
+    },
+  });
+  const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+    ({ theme, open }) => ({
+      width: drawerWidth,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      ...(open && {
+        ...openedMixin(theme),
+        '& .MuiDrawer-paper': openedMixin(theme),
+      }),
+      ...(!open && {
+        ...closedMixin(theme),
+        '& .MuiDrawer-paper': closedMixin(theme),
+      }),
+    }),
+  );
+  return (
+    <Drawer className="drawer" variant="permanent" anchor="left" open={true}>
+      {drawerOptions}
+    </Drawer>
+  );
+}

package/tabs/src/components/EventDialogTitle.jsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { React, useState, useEffect } from 'react';
+import { Box, Typography } from '@mui/material';
+import { format } from 'date-fns';
+import { useConfiguration } from '../data/hooks/useConfiguration';
+export function EventDialogTitle({ title, event }) {
+  const configuration = useConfiguration(),
+    [longDateFormat, setLongDateFormat] = useState(undefined);
+  useEffect(() => {
+    configuration.DateFormatDashboard &&
+      setLongDateFormat(configuration.DateFormatDashboard + ' HH:mm');
+  }, [configuration]);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography variant="subtitle1" color="primary" sx={{ fontWeight: 'bold' }}>
+        {title}
+      </Typography>
+      <Typography variant="h5">Meeting: {event.Title}</Typography>
+      {longDateFormat && (
+        <Typography variant="subtitle2">
+          {event.MeetingStart && format(event.MeetingStart, longDateFormat)} -{' '}
+          {event.MeetingEnd && format(event.MeetingEnd, longDateFormat)}
+        </Typography>
+      )}
+    </Box>
+  );
+}

package/tabs/src/components/HtmlBox.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { React } from 'react';
+import { Box } from '@mui/material';
+import DOMPurify from 'dompurify';
+export function HtmlBox({ html }) {
+  return (
+    <div>
+      {html && (
+        <Box
+          sx={{ width: '90%' }}
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(html),
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/tabs/src/components/Privacy.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * This component is used to display the required
+ * privacy statement which can be found in a link in the
+ * about tab.
+ */
+class Privacy extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Privacy Statement</h1>
+      </div>
+    );
+  }
+}
+export default Privacy;

package/tabs/src/components/ResizableGrid.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { React, useCallback, useEffect, useState } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import CustomColumnResizeIcon from './CustomColumnResizeIcon';
+import Constants from '../data/constants.json';
+export default function ResizableGrid(props) {
+  const { columns, ...other } = props;
+  const [dataColumns, setDataColumns] = useState(columns);
+  const widthChangedHandler = useCallback(
+    (newWidth, columnIndex) => {
+      setDataColumns((columns) => {
+        const column = columns[columnIndex];
+        column.width = newWidth;
+        column.flex = 0;
+        return columns.map((c) => ({ ...c }));
+      });
+    },
+    [setDataColumns],
+  );
+  const ColumnResizeIcon = useCallback(() => {
+    return <CustomColumnResizeIcon onWidthChanged={widthChangedHandler} id={other.id} />;
+  }, [widthChangedHandler]);
+  useEffect(() => {
+    setDataColumns(columns);
+  }, [columns]);
+  return (
+    <DataGrid
+      sx={{ height: '98%' }}
+      components={{
+        ColumnResizeIcon: ColumnResizeIcon,
+      }}
+      columns={dataColumns}
+      getRowHeight={() => {
+        return Constants.GridRowHeight;
+      }}
+      {...other}
+    />
+  );
+}