Add snap version to details page (#14110)

* Start to add snap version to details page

* Show install date

* Clean up

* Address PR comments

app/_locales/en/messages.json

@@ -2895,6 +2895,10 @@
     "message": "$1 snap has access to:",
     "description": "$1 represents the name of the snap"
   },
+  "snapAdded": {
+    "message": "Added on $1 from $2",
+    "description": "$1 represents the date the snap was installed, $2 represents which origin installed the snap."
+  },
   "snapError": {
     "message": "Snap Error: '$1'. Error Code: '$2'",
     "description": "This is shown when a snap encounters an error. $1 is the error message from the snap, and $2 is the error code."

ui/pages/settings/flask/view-snap/index.scss

@@ -8,14 +8,14 @@
   &__subheader {
     padding: 16px 4px;
     border-bottom: 1px solid var(--color-border-muted);
-    margin-right: 24px;
+    margin-inline-end: 24px;
     height: 72px;
     align-items: center;
     display: flex;
     flex-flow: row nowrap;
 
     @media screen and (max-width: $break-small) {
-      margin-right: 0;
+      margin-inline-end: 0;
       padding: 0 0 16px;
       flex-direction: column;
       align-items: center;
@@ -24,6 +24,19 @@
     }
   }
 
+  &__install-details {
+    border-bottom: 1px solid var(--color-border-muted);
+    margin-inline-end: 24px;
+
+    @media screen and (max-width: $break-small) {
+      margin-inline-end: 0;
+    }
+  }
+
+  &__version {
+    font-family: monospace;
+  }
+
   &__title {
     @media screen and (max-width: $break-small) {
       padding-bottom: 16px;

ui/pages/settings/flask/view-snap/view-snap.js

@@ -25,6 +25,7 @@ import {
   removePermissionsFor,
 } from '../../../../store/actions';
 import { getSnaps, getSubjectsWithPermission } from '../../../../selectors';
+import { formatDate } from '../../../../helpers/utils/util';
 
 function ViewSnap() {
   const t = useI18nContext();
@@ -71,6 +72,10 @@ function ViewSnap() {
   if (!snap) {
     return null;
   }
+
+  const versionHistory = snap.versionHistory ?? [];
+  const [firstInstall] = versionHistory;
+
   return (
     <div className="view-snap">
       <div className="settings-page__content-row">
@@ -100,6 +105,25 @@ function ViewSnap() {
             </Box>
           </Box>
         </div>
+        <Box
+          className="view-snap__install-details"
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          padding={2}
+        >
+          {firstInstall && (
+            <Typography variant={TYPOGRAPHY.H8}>
+              {t('snapAdded', [
+                formatDate(firstInstall.date, 'MMMM d, y'),
+                firstInstall.origin,
+              ])}
+            </Typography>
+          )}
+          <Typography className="view-snap__version" variant={TYPOGRAPHY.H7}>
+            {t('shorthandVersion', [snap.version])}
+          </Typography>
+        </Box>
         <Box
           className="view-snap__content-container"
           width={FRACTIONS.SEVEN_TWELFTHS}