Show snap version on install (#13931)

* Add version to Snap install page

* Fix text sizing inconsistency

* Use a localized string for shorthand versions

app/_locales/en/messages.json

@@ -2769,6 +2769,10 @@
   "settingsSearchMatchingNotFound": {
     "message": "No matching results found"
   },
+  "shorthandVersion": {
+    "message": "v$1",
+    "description": "$1 is replaced by a version string (e.g. 1.2.3)"
+  },
   "show": {
     "message": "Show"
   },

ui/components/app/flask/snap-settings-card/snap-settings-card.js

@@ -180,7 +180,7 @@ const SnapSettingsCard = ({
                 tag="span"
                 className="snap-settings-card__version"
               >
-                v {version}
+                {t('shorthandVersion', [version])}
               </Typography>
             </>
           )}

ui/components/app/permissions-connect-header/permissions-connect-header.component.js

@@ -5,12 +5,24 @@ import Box from '../../ui/box';
 import {
   FLEX_DIRECTION,
   JUSTIFY_CONTENT,
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  COLORS,
+  TYPOGRAPHY,
+  TEXT_ALIGN,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import SnapsAuthorshipPill from '../flask/snaps-authorship-pill';
+import Typography from '../../ui/typography';
 ///: END:ONLY_INCLUDE_IN
 
 export default class PermissionsConnectHeader extends Component {
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+  ///: END:ONLY_INCLUDE_IN
+
   static propTypes = {
     iconUrl: PropTypes.string,
     iconName: PropTypes.string.isRequired,
@@ -20,6 +32,7 @@ export default class PermissionsConnectHeader extends Component {
     headerText: PropTypes.string,
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
     npmPackageName: PropTypes.string,
+    snapVersion: PropTypes.string,
     ///: END:ONLY_INCLUDE_IN
   };
 
@@ -47,10 +60,12 @@ export default class PermissionsConnectHeader extends Component {
       headerText,
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
       npmPackageName,
+      snapVersion,
       ///: END:ONLY_INCLUDE_IN
     } = this.props;
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
     const npmPackageUrl = `https://www.npmjs.com/package/${npmPackageName}`;
+    const { t } = this.context;
     ///: END:ONLY_INCLUDE_IN
     return (
       <Box
@@ -71,6 +86,24 @@ export default class PermissionsConnectHeader extends Component {
           ) : null
           ///: END:ONLY_INCLUDE_IN
         }
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(flask)
+          snapVersion && (
+            <Typography
+              boxProps={{
+                margin: [2, 0],
+              }}
+              color={COLORS.TEXT_MUTED}
+              variant={TYPOGRAPHY.H7}
+              align={TEXT_ALIGN.CENTER}
+              tag="span"
+              className="version"
+            >
+              {t('shorthandVersion', [snapVersion])}
+            </Typography>
+          )
+          ///: END:ONLY_INCLUDE_IN
+        }
         <div className="permissions-connect-header__subtitle">{headerText}</div>
       </Box>
     );

ui/pages/permissions-connect/flask/snap-install/index.scss

@@ -22,6 +22,10 @@
     }
   }
 
+  .version {
+    font-family: monospace;
+  }
+
   .page-container__footer {
     width: 100%;
     margin-top: 12px;

ui/pages/permissions-connect/flask/snap-install/snap-install.js

@@ -75,16 +75,18 @@ export default function SnapInstall({
           headerText={null} // TODO(ritave): Add header text when snaps support description
           siteOrigin={targetSubjectMetadata.origin}
           npmPackageName={npmId}
+          snapVersion={targetSubjectMetadata.version}
           boxProps={{ alignItems: ALIGN_ITEMS.CENTER }}
         />
-        <Typography></Typography>
+        <Typography
-        <Box
+          boxProps={{
-          className="snap-requests-permission"
+            padding: [4, 4, 0, 4],
-          padding={4}
+          }}
-          tag={TYPOGRAPHY.H7}
+          variant={TYPOGRAPHY.H7}
+          tag="span"
         >
-          <span>{t('snapRequestsPermission')}</span>
+          {t('snapRequestsPermission')}
-        </Box>
+        </Typography>
         <PermissionsConnectPermissionList
           permissions={request.permissions || {}}
         />
@@ -149,5 +151,6 @@ SnapInstall.propTypes = {
     name: PropTypes.string,
     origin: PropTypes.string.isRequired,
     sourceCode: PropTypes.string,
+    version: PropTypes.string,
   }).isRequired,
 };