[PLT-6996] On "About Mattermost", add notes with links to notice.txt which has list of copyrights of open source components used (#7315)

* on "About Mattermost", add notes with links to notice.txt which has list of copyrights of open source components used

* remove apps from link

* Minor UI update

4 files changed, 47 insertions, 4 deletions

diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx
index 923b86609..4621cfc89 100644
--- a/webapp/components/about_build_modal.jsx
+++ b/webapp/components/about_build_modal.jsx
@@ -3,7 +3,7 @@
 
 import {Modal} from 'react-bootstrap';
 
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 import PropTypes from 'prop-types';
 
@@ -167,7 +167,15 @@ export default class AboutBuildModal extends React.Component {
                             />
                         </div>
                     </div>
-                    <div className='about-modal__hash form-group padding-top x2'>
+                    <div className='about-modal__notice form-group padding-top x2'>
+                        <p>
+                            <FormattedHTMLMessage
+                                id='about.notice'
+                                defaultMessage='Mattermost is made possible by the open source software used in our <a href="https://about.mattermost.com/platform-notice-txt/" target="_blank">platform</a>, <a href="https://about.mattermost.com/desktop-notice-txt/" target="_blank">desktop</a> and <a href="https://about.mattermost.com/mobile-notice-txt/" target="_blank">mobile</a> apps.'
+                            />
+                        </p>
+                    </div>
+                    <div className='about-modal__hash'>
                         <p>
                             <FormattedMessage
                                 id='about.hash'
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index a23058f1d..d53559826 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -9,6 +9,7 @@
   "about.hash": "Build Hash:",
   "about.hashee": "EE Build Hash:",
   "about.licensed": "Licensed to:",
+  "about.notice": "Mattermost is made possible by the open source software used in our <a href=\"https://about.mattermost.com/platform-notice-txt/\" target='_blank'>platform</a>, <a href=\"https://about.mattermost.com/desktop-notice-txt/\" target='_blank'>desktop</a> and <a href=\"https://about.mattermost.com/mobile-notice-txt/\" target='_blank'>mobile</a> apps.",
   "about.number": "Build Number:",
   "about.teamEditionLearn": "Join the Mattermost community at ",
   "about.teamEditionSt": "All your team communication in one place, instantly searchable and accessible anywhere.",
diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss
index bb583c73a..539130ad0 100644
--- a/webapp/sass/routes/_about-modal.scss
+++ b/webapp/sass/routes/_about-modal.scss
@@ -87,6 +87,18 @@
             }
         }
 
+        .about-modal__notice {
+            @include opacity(.8);
+            font-size: .79em;
+            text-align: right;
+
+            p {
+                &:first-child {
+                    text-align: left;
+                }
+            }
+        }
+
         .about-modal__logo {
             @include opacity(.9);
             padding: 0 40px 0 20px;
diff --git a/webapp/tests/components/__snapshots__/about_build_modal.test.jsx.snap b/webapp/tests/components/__snapshots__/about_build_modal.test.jsx.snap
index 105c97546..b45b6b7f0 100644
--- a/webapp/tests/components/__snapshots__/about_build_modal.test.jsx.snap
+++ b/webapp/tests/components/__snapshots__/about_build_modal.test.jsx.snap
@@ -141,7 +141,18 @@ exports[`components/AboutBuildModal should match snapshot for enterprise edition
       </div>
     </div>
     <div
-      className="about-modal__hash form-group padding-top x2"
+      className="about-modal__notice form-group padding-top x2"
+    >
+      <p>
+        <FormattedHTMLMessage
+          defaultMessage="Mattermost is made possible by the open source software used in our <a href=\\"https://about.mattermost.com/platform-notice-txt/\\" target=\\"_blank\\">platform</a>, <a href=\\"https://about.mattermost.com/desktop-notice-txt/\\" target=\\"_blank\\">desktop</a> and <a href=\\"https://about.mattermost.com/mobile-notice-txt/\\" target=\\"_blank\\">mobile</a> apps."
+          id="about.notice"
+          values={Object {}}
+        />
+      </p>
+    </div>
+    <div
+      className="about-modal__hash"
     >
       <p>
         <FormattedMessage
@@ -315,7 +326,18 @@ exports[`components/AboutBuildModal should match snapshot for team edition 1`] =
       </div>
     </div>
     <div
-      className="about-modal__hash form-group padding-top x2"
+      className="about-modal__notice form-group padding-top x2"
+    >
+      <p>
+        <FormattedHTMLMessage
+          defaultMessage="Mattermost is made possible by the open source software used in our <a href=\\"https://about.mattermost.com/platform-notice-txt/\\" target=\\"_blank\\">platform</a>, <a href=\\"https://about.mattermost.com/desktop-notice-txt/\\" target=\\"_blank\\">desktop</a> and <a href=\\"https://about.mattermost.com/mobile-notice-txt/\\" target=\\"_blank\\">mobile</a> apps."
+          id="about.notice"
+          values={Object {}}
+        />
+      </p>
+    </div>
+    <div
+      className="about-modal__hash"
     >
       <p>
         <FormattedMessage