fix: remodel About page

Composer/packages/client/src/pages/about/About.tsx

@@ -8,80 +8,69 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
 import formatMessage from 'format-message';
 import { RouteComponentProps } from '@reach/router';
 
+import { isElectron } from '../../utils/electronUtil';
+
 import * as about from './styles';
 
 export const About: React.FC<RouteComponentProps> = () => {
   return (
-    <div css={about.outline} role="main">
-      <div css={about.content}>
-        <h1 css={about.title}> {formatMessage(`About`)} </h1>
-        <div css={about.body}>
-          <div css={about.version}>{formatMessage(`Release: `) + (process.env.COMPOSER_VERSION || 'Unknown')}</div>
-          <div css={about.description}>
-            <p>
-              {formatMessage(
-                `Bot Framework Composer is a visual authoring canvas for building bots and other types of conversational application with the Microsoft Bot Framework technology stack. With Composer you will find everything you need to build a modern, state-of-the-art conversational experience.`
-              )}
-            </p>
-            <p>
-              {formatMessage(
-                `Bot Framework Composer enables developers and multi-disciplinary teams to build all kinds of conversational experiences, using the latest components from the Bot Framework: SDK, LG, LU, and declarative file formats, all without writing code.`
-              )}
+    <div css={about.content} role="main">
+      <div css={about.body}>
+        <div css={about.smallText}>
+          {formatMessage.rich(
+            'Our privacy statement is located at <a>https://go.microsoft.com/fwlink/?LinkID=824704</a>. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.',
+            {
+              a: ({ children }) => <Link href="https://go.microsoft.com/fwlink/?LinkID=824704">{children}</Link>,
+            }
+          )}
+        </div>
+        <div css={about.smallerText}>
+          {formatMessage.rich(
+            '<p>Copyright (c) Microsoft Corporation.</p><p>MIT License</p><p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p><p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p><p>THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>',
+            { p: ({ children }) => <p>{children}</p> }
+          )}
+        </div>
+        <div css={about.version}>
+          {formatMessage(`Release: `) +
+            (isElectron()
+              ? (window as any).appVersion
+              : `${process.env.COMPOSER_VERSION}-${process.env.GIT_SHA}` || 'Unknown')}
+        </div>
+        <div css={about.diagnosticsInfo}>
+          <div css={about.diagnosticsInfoText}>
+            <div css={about.diagnosticsInfoTextAlignLeft}>{formatMessage(`SDK runtime packages`)}</div>
+            <div css={about.diagnosticsInfoTextAlignLeft}>
               <Link
-                href={'https://docs.microsoft.com/en-us/composer/'}
+                href={`https://www.nuget.org/packages/Microsoft.Bot.Builder/${process.env.SDK_PACKAGE_VERSION}`}
                 style={{ marginLeft: '5px', textDecoration: 'underline' }}
                 target={'_blank'}
               >
-                {formatMessage(`Learn more`)}
+                {process.env.SDK_PACKAGE_VERSION || 'Unknown'}
               </Link>
-            </p>
-          </div>
-          <div css={about.DiagnosticsInfo}>
-            <div css={about.DiagnosticsInfoText}>
-              <div css={about.DiagnosticsInfoTextAlignLeft}>{formatMessage(`SDK runtime packages`)}</div>
-              <div css={about.DiagnosticsInfoTextAlignLeft}>
-                <Link
-                  href={`https://www.nuget.org/packages/Microsoft.Bot.Builder/${process.env.SDK_PACKAGE_VERSION}`}
-                  style={{ marginLeft: '5px', textDecoration: 'underline' }}
-                  target={'_blank'}
-                >
-                  {process.env.SDK_PACKAGE_VERSION || 'Unknown'}
-                </Link>
-              </div>
             </div>
           </div>
         </div>
+      </div>
+      <div css={about.linkRow}>
+        <Link
+          href={'https://github.com/microsoft/BotFramework-Composer/issues/new/choose'}
+          styles={about.helpLink}
+          target={'_blank'}
+        >
+          {formatMessage(`Getting Help`)}
+        </Link>
+      </div>
+      <div css={about.linkContainer}>
         <div css={about.linkRow}>
+          <Icon iconName={'BlockedSite'} styles={about.icon} tabIndex={-1} />
           <Link
-            href={'https://github.com/microsoft/BotFramework-Composer/issues/new/choose'}
-            styles={about.helpLink}
+            href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/LICENSE.md'}
+            styles={about.link}
             target={'_blank'}
           >
-            {formatMessage(`Getting Help`)}
+            {formatMessage(`Terms of Use`)}
           </Link>
         </div>
-        <div css={about.linkContainer}>
-          <div css={about.linkRow}>
-            <Icon iconName={'BlockedSite'} styles={about.icon} tabIndex={-1} />
-            <Link
-              href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/LICENSE.md'}
-              styles={about.link}
-              target={'_blank'}
-            >
-              {formatMessage(`Terms of Use`)}
-            </Link>
-          </div>
-          <div css={about.linkRow}>
-            <Icon ariaLabel={formatMessage('Privacy button')} iconName={'Lock'} styles={about.icon} />
-            <Link
-              href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/PRIVACY.md'}
-              styles={about.link}
-              target={'_blank'}
-            >
-              {formatMessage(`Privacy`)}
-            </Link>
-          </div>
-        </div>
       </div>
     </div>
   );

Composer/packages/client/src/pages/about/styles.js

@@ -3,72 +3,53 @@
 
 import { css } from '@emotion/core';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
-export const outline = css`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  margin: 32px 50px 0px 32px;
-  border: 1px solid #979797;
-  overflow-x: auto;
-`;
 
 export const content = css`
   height: 100%;
 `;
 
-export const title = css`
-  display: block;
-  height: 36px;
-  margin: 33px 0px 0px 42px;
-  font-size: ${FontSizes.xLarge};
-  font-weight: ${FontWeights.semibold};
-  line-height: 32px;
-`;
-
 export const body = css`
   width: auto;
   margin-top: 26px;
   margin-left: 60px;
 `;
 
 export const version = css`
-  font-size: ${FontSizes.large};
+  font-size: ${FontSizes.medium};
   font-weight: ${FontWeights.regular};
   line-height: 32px;
 `;
 
-export const description = css`
-  font-size: ${FontSizes.mediumPlus};
-  font-weight: ${FontWeights.regular};
-  line-height: 32px;
-  width: 50%;
-  margin-top: 20px;
-`;
-
-export const DiagnosticsText = css`
+export const diagnosticsText = css`
   width: 50%;
   font-size: 24px;
   margin-top: 20px;
 `;
 
 export const smallText = css`
-  margin-top: 20px;
-  font-size: 13px;
+  margin: 20px 20px 20px 0;
+  font-size: 14px;
+`;
+
+export const smallerText = css`
+  margin: 20px 20px 20px 0;
+  font-size: 12px;
 `;
-export const DiagnosticsInfoText = css`
+
+export const diagnosticsInfoText = css`
   display: flex;
   justify-content: space-between;
   width: 550px;
   font-size: 24px;
 `;
 
-export const DiagnosticsInfoTextAlignLeft = css`
+export const diagnosticsInfoTextAlignLeft = css`
   text-align: left;
   font-size: ${FontSizes.mediumPlus};
   font-weight: ${FontWeights.semibold};
 `;
 
-export const DiagnosticsInfo = css`
+export const diagnosticsInfo = css`
   margin-top: 40px;
 `;
 

Composer/packages/client/src/pages/setting/SettingsPage.tsx

@@ -106,12 +106,6 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
     return settingLabels.appSettings;
   }, [location.pathname]);
 
-  const onRenderHeaderContent = () => {
-    return formatMessage(
-      'This Page contains detailed information about your bot. For security reasons, they are hidden by default. To test your bot or publish to Azure, you may need to provide these settings'
-    );
-  };
-
   return (
     <Page
       headerStyle={header}
@@ -121,7 +115,6 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
       pageMode={'settings'}
       title={title}
       toolbarItems={[]}
-      onRenderHeaderContent={onRenderHeaderContent}
     >
       <AddLanguageModal
         defaultLanguage={defaultLanguage}

Composer/packages/electron-server/src/preload.js

@@ -1,9 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-const { ipcRenderer } = require('electron'); // eslint-disable-line
+const { app, ipcRenderer } = require('electron'); // eslint-disable-line
 
 // expose ipcRenderer to the browser
 window.ipcRenderer = ipcRenderer;
+// get the app version to hand into the client
+window.appVersion = app.getVersion();
 // flag to distinguish electron client from web app client
 window.__IS_ELECTRON__ = true;

Composer/packages/server/src/locales/en-US.json

@@ -494,18 +494,12 @@
   "bot_files_created_986109df": {
     "message": "Bot files created"
   },
-  "bot_framework_composer_enables_developers_and_mult_ce0e42a9": {
-    "message": "Bot Framework Composer enables developers and multi-disciplinary teams to build all kinds of conversational experiences, using the latest components from the Bot Framework: SDK, LG, LU, and declarative file formats, all without writing code."
-  },
   "bot_framework_composer_fae721be": {
     "message": "Bot Framework Composer"
   },
   "bot_framework_composer_icon_gray_fa72d3d6": {
     "message": "bot framework composer icon gray"
   },
-  "bot_framework_composer_is_a_visual_authoring_canva_c3947d91": {
-    "message": "Bot Framework Composer is a visual authoring canvas for building bots and other types of conversational application with the Microsoft Bot Framework technology stack. With Composer you will find everything you need to build a modern, state-of-the-art conversational experience."
-  },
   "bot_framework_composer_requires_node_js_in_order_t_9c45c226": {
     "message": "Bot Framework Composer requires Node.js in order to create and run a new bot. Click “Install Node.js” to install the latest version"
   },
@@ -2690,9 +2684,15 @@
   "other_1c6d9c79": {
     "message": "Other"
   },
+  "our_privacy_statement_is_located_at_a_https_go_mic_56534925": {
+    "message": "Our privacy statement is located at <a>https://go.microsoft.com/fwlink/?LinkID=824704</a>. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices."
+  },
   "output_5023cf84": {
     "message": "Output"
   },
+  "p_copyright_c_microsoft_corporation_p_p_mit_licens_cd145fd6": {
+    "message": "<p>Copyright (c) Microsoft Corporation.</p><p>MIT License</p><p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p><p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p><p>THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>"
+  },
   "page_number_cdee4179": {
     "message": "Page number"
   },
@@ -3740,9 +3740,6 @@
   "this_page_contains_detailed_information_about_your_224a2b04": {
     "message": "This Page contains detailed information about your bot. For security reasons, they are hidden by default. To test your bot or publish to Azure, you may need to provide these settings."
   },
-  "this_page_contains_detailed_information_about_your_b2b3413b": {
-    "message": "This Page contains detailed information about your bot. For security reasons, they are hidden by default. To test your bot or publish to Azure, you may need to provide these settings"
-  },
   "this_publishing_profile_profilename_is_no_longer_s_eee0f447": {
     "message": "This publishing profile ({ profileName }) is no longer supported. You are a member of multiple Azure tenants and the profile needs to have a tenant id associated with it. You can either edit the profile by adding the `tenantId` property to it''s configuration or create a new one."
   },