Merge branch 'NBO/add_about_section_PROD-7848'

cypress/commons/actions/generic/AppBar.js

@@ -33,18 +33,26 @@ function getSupportPageLink() {
   const supportPageLink = `a[href="${SUPPORT_URL}"]`;
   return cy.get(supportPageLink);
 }
+function getAboutButton() {
+  return cy.get(GENERIC_SELECTORS.helpMenu.aboutButton);
+}
+function getAboutDialogCloseButton() {
+  return cy.get(GENERIC_SELECTORS.helpMenu.aboutDialogCloseButton);
+}
+function getAboutDialog() {
+  return cy.get(GENERIC_SELECTORS.helpMenu.aboutDialog);
+}
 
 // User profile actions
 function openUserInfoMenu() {
-  getUserInfoMenuButton().click();
+  return getUserInfoMenuButton().click();
 }
 function openLanguageSelectorInMenu() {
   return getLanguageSelectorButton().click();
 }
 function selectLanguageInMenu(lang) {
   return getLanguageChangeButton(lang).click();
 }
-
 function switchLanguageTo(lang) {
   openUserInfoMenu();
   openLanguageSelectorInMenu();
@@ -55,6 +63,12 @@ function switchLanguageTo(lang) {
 function openHelpMenu() {
   return getHelpMenu().click();
 }
+function openAboutDialog() {
+  return getAboutButton().click();
+}
+function closeAboutDialog() {
+  return getAboutDialogCloseButton().click();
+}
 
 export const AppBar = {
   getUserInfoMenuButton,
@@ -65,9 +79,13 @@ export const AppBar = {
   getHelpMenu,
   getDocumentationLink,
   getSupportPageLink,
+  getAboutButton,
+  getAboutDialog,
   openUserInfoMenu,
   openLanguageSelectorInMenu,
   selectLanguageInMenu,
   switchLanguageTo,
   openHelpMenu,
+  openAboutDialog,
+  closeAboutDialog,
 };

cypress/commons/constants/generic/IdConstants.js

@@ -17,6 +17,9 @@ export const GENERIC_SELECTORS = {
   },
   helpMenu: {
     menu: '[data-cy=help-menu]',
+    aboutButton: '[data-cy=about-button]',
+    aboutDialog: '[data-cy=about-dialog]',
+    aboutDialogCloseButton: '[data-cy=about-dialog-close-button]',
   },
   scenario: {
     view: '[data-cy=scenario-view]',

cypress/integration/helpMenu/HelpMenu-test-spec.js

@@ -23,4 +23,13 @@ describe('UserInfo features', () => {
     AppBar.openHelpMenu();
     AppBar.getSupportPageLink().should('have.attr', 'target', '_blank');
   });
+
+  it('can display About dialog', () => {
+    AppBar.getAboutDialog().should('not.exist');
+    AppBar.openHelpMenu();
+    AppBar.openAboutDialog();
+    AppBar.getAboutDialog().should('be.visible');
+    AppBar.closeAboutDialog();
+    AppBar.getAboutDialog().should('not.exist');
+  });
 });

doc/README.md

@@ -8,3 +8,4 @@
 - [Scenario Parameters configuration](scenarioParametersConfiguration.md)
 - [Scenario Parameters advanced customization](scenarioParametersCustomization.md)
 - [Theme Customization](themeCustomization.md)
+- [About Content Customization](aboutContentCustomization.md)

doc/aboutContentCustomization.md

@@ -0,0 +1,64 @@
+# About customization
+
+## Customization of About content component
+
+By default, About content customization is set in the React component:
+[src/components/AboutContent/AboutContent.js](../src/components/AboutContent/AboutContent.js)
+
+## About content configuration
+
+- In the same [AboutContent.js](../src/components/AboutContent/AboutContent.js) file,
+  **title** and **text** contents are set through these translation keys:
+
+  ```jsx
+    <Grid className={classes.title} item>
+      {t('genericcomponent.dialog.about.title')}
+    </Grid>
+    ...
+    <Grid item className={classes.content}>
+      {t('genericcomponent.dialog.about.content')}
+    </Grid>
+  ```
+
+  and translation files:
+
+  [public/locales/en/translation.json](../public/locales/en/translation.json)
+
+  [public/locales/fr/translation.json](../public/locales/fr/translation.json)
+
+- Webapp **version number** is automaticaly fetched from [package.json](package.json) at deployment.
+  So, don't forget to keep up-to-date the variable `version`:
+
+  ```json
+  {
+    "name": "azure-sample-webapp",
+    "version": "2.1.0",
+    "private": true,
+    "dependencies": {
+  ```
+
+## Enable or disable About entry in help menu
+
+In file [src/services/config/Menu.js](../src/services/config/Menu.js):
+
+- To **enable** About entry in help menu.
+  `About` constant must be set with **About content component**.
+
+  By default, the constant is set like that:
+
+  ```js
+  import { AboutContent } from '../../components/AboutContent';
+
+  export const About = AboutContent;
+  ```
+
+  If you want to use another component, don't forget to set correctly the `import` line.
+
+- To **disable** About entry in help menu.
+  `About` constant must be set as **_null_** :
+
+  ```js
+  // import { AboutContent } from '../../components/AboutContent';
+
+  export const About = null;
+  ```

package.json

@@ -1,12 +1,12 @@
 {
   "name": "azure-sample-webapp",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "private": true,
   "dependencies": {
     "@cosmotech/api-ts": "^0.1.0",
     "@cosmotech/azure": "^1.1.2",
     "@cosmotech/core": "^1.6.1",
-    "@cosmotech/ui": "^1.1.7",
+    "@cosmotech/ui": "^1.1.0",
     "@date-io/core": "^1.3.6",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
@@ -39,8 +39,8 @@
     "validate.js": "^0.13.1"
   },
   "scripts": {
-    "start": "cross-env ESLINT_NO_DEV_ERRORS=true react-scripts start",
-    "build": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "start": "cross-env ESLINT_NO_DEV_ERRORS=true REACT_APP_VERSION=$npm_package_version react-scripts start",
+    "build": "cross-env DISABLE_ESLINT_PLUGIN=true REACT_APP_VERSION=$npm_package_version react-scripts build",
     "test": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
     "cypress": "node_modules/.bin/cypress open",

public/locales/en/translation.json

@@ -279,7 +279,8 @@
     },
     "helpmenu": {
       "documentation": "Documentation",
-      "support": "Contact support"
+      "support": "Contact support",
+      "about": "About"
     },
     "dialog": {
       "scenario": {
@@ -291,6 +292,13 @@
           "title": "Discard current modifications ?",
           "body": "You will lose all your current changes made on the scenario parameters."
         }
+      },
+      "about": {
+        "title": "Azure Sample Web Application",
+        "content": "The digital twin example solution is provided by Cosmo Tech. You can use this example to create your own digital twin solution",
+        "button": {
+          "close": "Close"
+        }
       }
     },
     "text": {

public/locales/fr/translation.json

@@ -279,7 +279,8 @@
     },
     "helpmenu": {
       "documentation": "Documentation",
-      "support": "Contacter le support"
+      "support": "Contacter le support",
+      "about": "A propos"
     },
     "dialog": {
       "scenario": {
@@ -291,6 +292,13 @@
           "title": "Abandonner les modifications ?",
           "body": "Vous allez perdre toutes les modifications que vous avez faites sur les paramètres de scénario."
         }
+      },
+      "about": {
+        "title": "Exemple d'Application Web Azure",
+        "content": "La solution d'exemple de jumeaux numériques est fournie par Cosmo Tech. Vous pouvez utiliser cet example pour créer votre propre solution de jumeaux numériques",
+        "button": {
+          "close": "Fermer"
+        }
       }
     },
     "text": {

src/components/AboutContent/AboutContent.js

@@ -0,0 +1,69 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+import React from 'react';
+import { Grid, makeStyles, ButtonBase, Link } from '@material-ui/core';
+import theme from '../../theme';
+import { useTranslation } from 'react-i18next';
+import { SUPPORT_URL, COSMOTECH_URL, APP_VERSION } from '../../config/AppConfiguration';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    alignItems: 'center',
+  },
+  picture: {
+    marginRight: '16px',
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: '24px',
+  },
+  version: {
+    marginTop: '16px',
+    fontWeight: 'bold',
+  },
+  content: {
+    marginTop: '2px',
+    marginBottom: '16px',
+  },
+}));
+
+export const AboutContent = () => {
+  const { t } = useTranslation();
+  const classes = useStyles();
+
+  return (
+    <Grid container spacing={2} className={classes.root}>
+      <Grid item className={classes.picture}>
+        <ButtonBase>
+          <img alt="Cosmo Tech" src={theme.picture.logo} />
+        </ButtonBase>
+      </Grid>
+      <Grid item container xs>
+        <Grid item container direction="column">
+          <Grid className={classes.title} item>
+            {t('genericcomponent.dialog.about.title')}
+          </Grid>
+          <Grid item className={classes.version}>
+            {APP_VERSION}
+          </Grid>
+          <Grid item className={classes.content}>
+            {t('genericcomponent.dialog.about.content')}
+          </Grid>
+          <Grid item>
+            <Link href={SUPPORT_URL} target="_blank" rel="noreferrer">
+              {SUPPORT_URL}
+            </Link>
+          </Grid>
+          <Grid item>
+            <Link href={COSMOTECH_URL} target="_blank" rel="noreferrer">
+              {COSMOTECH_URL}
+            </Link>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+AboutContent.propTypes = {};

src/components/AboutContent/index.js

@@ -0,0 +1 @@
+export { AboutContent } from './AboutContent';

src/components/index.js

@@ -3,3 +3,4 @@
 
 export { default as ScenarioParameters } from './ScenarioParameters';
 export { PermissionsGate } from './PermissionsGate';
+export { AboutContent } from './AboutContent';

src/config/AppConfiguration.js

@@ -1,6 +1,9 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 
+// App version
+export const APP_VERSION = process.env.REACT_APP_VERSION;
+
 // App translation configuration
 export const LANGUAGES = {
   en: 'English',
@@ -21,7 +24,10 @@ export const SCENARIO_RUN_LOG_TYPE = 'CUMULATED_LOGS';
 export const ENABLE_APPLICATION_INSIGHTS = true;
 
 // Support page url
-export const SUPPORT_URL = 'http://support.cosmotech.com';
+export const SUPPORT_URL = 'https://support.cosmotech.com';
+
+// Cosmotech website url
+export const COSMOTECH_URL = 'https://cosmotech.com';
 
 // Documentation url
 export const DOCUMENTATION_URL = 'doc.pdf';

src/layouts/TabLayout/TabLayout.js

@@ -9,6 +9,7 @@ import { Auth } from '@cosmotech/core';
 import { PrivateRoute, UserInfo, HelpMenu } from '@cosmotech/ui';
 import { useTranslation } from 'react-i18next';
 import { LANGUAGES, SUPPORT_URL, DOCUMENTATION_URL } from '../../config/AppConfiguration';
+import { About } from '../../services/config/Menu';
 import theme from '../../theme/';
 import profilePlaceholder from '../../assets/profile_placeholder.png';
 
@@ -82,6 +83,8 @@ const TabLayout = (props) => {
   const helpLabels = {
     documentation: t('genericcomponent.helpmenu.documentation'),
     support: t('genericcomponent.helpmenu.support'),
+    aboutTitle: t('genericcomponent.helpmenu.about'),
+    close: t('genericcomponent.dialog.about.button.close'),
   };
 
   return (
@@ -103,7 +106,12 @@ const TabLayout = (props) => {
           </Tabs>
           <div className={classes.rightBar}>
             <div className={classes.rightBarElement}>
-              <HelpMenu documentationUrl={DOCUMENTATION_URL} supportUrl={SUPPORT_URL} labels={helpLabels} />
+              <HelpMenu
+                documentationUrl={DOCUMENTATION_URL}
+                supportUrl={SUPPORT_URL}
+                about={About ? <About /> : null}
+                labels={helpLabels}
+              />
             </div>
             <div className={classes.rightBarElement}>
               <UserInfo

src/services/config/Menu.js

@@ -0,0 +1,7 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+import { AboutContent } from '../../components/AboutContent';
+
+// If you do not want to display About entry in help menu, set About to null
+export const About = AboutContent;

yarn.lock

@@ -1245,10 +1245,10 @@
     validator "^13.7.0"
     xlsx "^0.17.4"
 
-"@cosmotech/ui@^1.1.7":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@cosmotech/ui/-/ui-1.2.0.tgz#e440fbb57c88a62f7f811a37d31e4a1a5a936ddf"
-  integrity sha512-v3cL0k9iNdkpYpY4iG8CXH4s2e0NDZGvXJSFggSfLdgGps4MwaQYHnztlb9c8bEsbFwU+1LgGxIRtlQ3hYywyw==
+"@cosmotech/ui@^1.1.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@cosmotech/ui/-/ui-1.2.1.tgz#5e40530e03fbbb8b7d8d71bec8be3c8a90d736bb"
+  integrity sha512-pG6eN0SDW7GUaR7m8QUVdTWqptPx9TgG1wscM6iNUZfDHwVSKdYjWmKhepdt17+j2oLVKOp4u9CZ+1Ljna/wEQ==
   dependencies:
     "@date-io/date-fns" "^1.3.13"
     "@material-ui/pickers" "^3.3.10"