Show release version in Footer (#4200)

Co-authored-by: nl_0 <[email protected]>
Co-authored-by: Alexei Mochalov <[email protected]>

.github/workflows/deploy-catalog.yaml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - master
-      - selective-package-download
     paths:
       - '.github/workflows/deploy-catalog.yaml'
       - 'catalog/**'

catalog/CHANGELOG.md

@@ -17,6 +17,7 @@ where verb is one of
 
 ## Changes
 
+- [Changed] Show stack release version in footer ([#4200](https://github.com/quiltdata/quilt/pull/4200))
 - [Added] Selective package downloading ([#4173](https://github.com/quiltdata/quilt/pull/4173))
 - [Added] Qurator Omni: initial public release ([#4032](https://github.com/quiltdata/quilt/pull/4032), [#4181](https://github.com/quiltdata/quilt/pull/4181))
 - [Added] Admin: UI for configuring longitudinal queries (Tabulator) ([#4135](https://github.com/quiltdata/quilt/pull/4135), [#4164](https://github.com/quiltdata/quilt/pull/4164), [#4165](https://github.com/quiltdata/quilt/pull/4165))

catalog/app/components/Footer/Footer.js → catalog/app/components/Footer/Footer.tsx

@@ -9,7 +9,6 @@ import * as style from 'constants/style'
 import * as URLS from 'constants/urls'
 import * as Notifications from 'containers/Notifications'
 import * as CatalogSettings from 'utils/CatalogSettings'
-import HashLink from 'utils/HashLink'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import copyToClipboard from 'utils/clipboard'
 
@@ -36,42 +35,50 @@ function Version() {
   const classes = useVersionStyles()
   const { push } = Notifications.use()
   const handleCopy = React.useCallback(() => {
-    copyToClipboard(process.env.REVISION_HASH)
+    copyToClipboard(cfg.stackVersion)
     push('Web catalog container hash has been copied to clipboard')
   }, [push])
   return (
-    <div>
-      <M.Typography
-        className={classes.revision}
-        onClick={handleCopy}
-        title="Copy product revision hash to clipboard"
-        variant="caption"
-      >
-        Revision: {process.env.REVISION_HASH.substring(0, 8)}
-      </M.Typography>
-    </div>
+    <M.Typography
+      className={classes.revision}
+      onClick={handleCopy}
+      title="Copy Platform release version to clipboard"
+      variant="caption"
+    >
+      Version: {cfg.stackVersion}
+    </M.Typography>
   )
 }
 
 const FooterLogo = () => <Logo height="29px" width="76.5px" />
 
-const NavLink = (props) => (
-  <M.Link
-    variant="button"
-    underline="none"
-    color="textPrimary"
-    component={props.to ? HashLink : undefined}
-    {...props}
-  />
+const NavLink = (props: M.LinkProps) => (
+  <M.Link variant="button" underline="none" color="textPrimary" {...props} />
 )
 
 const NavSpacer = () => <M.Box ml={{ xs: 2, sm: 3 }} />
 
-const NavIcon = ({ icon, ...props }) => (
-  <M.Box component="a" {...props}>
-    <M.Box component="img" height={18} src={icon} alt="" display="block" />
-  </M.Box>
-)
+const useNavIconStyles = M.makeStyles({
+  root: {
+    display: 'block',
+    height: '18px',
+  },
+})
+
+interface NavIconProps extends M.BoxProps {
+  href: string
+  icon: string
+  target: string
+}
+
+const NavIcon = ({ icon, ...props }: NavIconProps) => {
+  const classes = useNavIconStyles()
+  return (
+    <M.Box component="a" {...props}>
+      <img className={classes.root} src={icon} alt="" />
+    </M.Box>
+  )
+}
 
 const useStyles = M.makeStyles((t) => ({
   root: {
@@ -80,7 +87,7 @@ const useStyles = M.makeStyles((t) => ({
       '0px -12px 24px 0px rgba(25, 22, 59, 0.05)',
       '0px -16px 40px 0px rgba(25, 22, 59, 0.07)',
       '0px -24px 88px 0px rgba(25, 22, 59, 0.16)',
-    ],
+    ].join(', '),
     height: 230,
     paddingTop: t.spacing(6),
     position: 'relative',
@@ -114,6 +121,9 @@ const useStyles = M.makeStyles((t) => ({
       `,
     },
   },
+  logoLink: {
+    display: 'block',
+  },
 }))
 
 export default function Footer() {
@@ -137,9 +147,9 @@ export default function Footer() {
                 <FooterLogo />
               </a>
             ) : (
-              <M.Box component={Link} to={urls.home()} display="block">
+              <Link className={classes.logoLink} to={urls.home()}>
                 <FooterLogo />
-              </M.Box>
+              </Link>
             )}
           </M.Box>
 

catalog/app/components/Layout/Layout.tsx

@@ -53,7 +53,7 @@ export function Layout({ bare = false, dark = false, children, pre }: LayoutProp
         {!!pre && pre}
         {!!children && <M.Box p={4}>{children}</M.Box>}
         <M.Box flexGrow={1} />
-        {!!isHomepage && isHomepage.isExact && <Footer />}
+        {isHomepage?.isExact && <Footer />}
         {bookmarks && <Bookmarks.Sidebar bookmarks={bookmarks} bucket={bucket} />}
       </NavBar.Provider>
     </Root>

catalog/app/containers/Notifications/Notification.js → catalog/app/containers/Notifications/Notification.tsx

@@ -1,4 +1,3 @@
-import PT from 'prop-types'
 import React from 'react'
 import * as M from '@material-ui/core'
 
@@ -8,7 +7,24 @@ const useStyles = M.makeStyles((t) => ({
   },
 }))
 
-export default function Notification({ id, ttl, message, action, dismiss }) {
+interface NotificationProps {
+  id: string
+  ttl?: number | null
+  message: React.ReactNode
+  action: {
+    onClick: () => void
+    label: React.ReactNode
+  }
+  dismiss: (id: string) => void
+}
+
+export default function Notification({
+  id,
+  ttl,
+  message,
+  action,
+  dismiss,
+}: NotificationProps) {
   const classes = useStyles()
 
   const handleClose = React.useCallback(() => dismiss(id), [dismiss, id])
@@ -40,14 +56,3 @@ export default function Notification({ id, ttl, message, action, dismiss }) {
     />
   )
 }
-
-Notification.propTypes = {
-  id: PT.string.isRequired,
-  ttl: PT.oneOf([null, PT.number.isRequired]),
-  message: PT.node.isRequired,
-  action: PT.shape({
-    label: PT.string.isRequired,
-    onClick: PT.func.isRequired,
-  }),
-  dismiss: PT.func.isRequired,
-}

catalog/app/utils/Config.ts

@@ -47,6 +47,7 @@ export interface ConfigJson {
   qurator?: boolean
 
   build_version?: string // not sure where this comes from
+  stackVersion: string
 }
 
 const ajv = new Ajv({ allErrors: true, removeAdditional: true })

catalog/app/utils/Sentry.ts

@@ -6,14 +6,12 @@ import * as Sentry from '@sentry/react'
 import * as AuthSelectors from 'containers/Auth/selectors'
 import type { Config } from 'utils/Config'
 
-const RELEASE = `catalog@${process.env.REVISION_HASH}`
-
 export function init(cfg: Config, history?: History) {
   if (!cfg.sentryDSN) return false
 
   Sentry.init({
     dsn: cfg.sentryDSN,
-    release: RELEASE,
+    release: cfg.stackVersion,
     environment: process.env.NODE_ENV === 'development' ? 'dev' : 'prod',
     integrations: [
       history

catalog/app/utils/tracking.js

@@ -76,7 +76,7 @@ export function TrackingProvider({ userSelector, children }) {
       origin: window.location.origin,
       location,
       user,
-      catalog_release: process.env.REVISION_HASH,
+      catalog_release: cfg.stackVersion,
     }),
     [location, user],
   )

catalog/config-schema.json

@@ -96,6 +96,10 @@
     "qurator": {
       "type": "boolean",
       "description": "Enable Qurator AI Assistant (powered by Amazon Bedrock)"
+    },
+    "stackVersion": {
+      "type": "string",
+      "description": "Stack release version"
     }
   },
   "required": [
@@ -109,7 +113,8 @@
     "s3Proxy",
     "serviceBucket",
     "ssoAuth",
-    "ssoProviders"
+    "ssoProviders",
+    "stackVersion"
   ],
   "definitions": {
     "Url": {

catalog/config.js.example

@@ -7,4 +7,5 @@ window.QUILT_CATALOG_CONFIG = {
   "passwordAuth": "ENABLED",
   "ssoAuth": "SIGN_IN_ONLY",
   "ssoProviders": "google",
+  "stackVersion": "local-dev"
 }

catalog/config.json.tmpl

@@ -15,5 +15,6 @@
     "serviceBucket": "${SERVICE_BUCKET}",
     "mode": "${CATALOG_MODE}",
     "chunkedChecksums": ${CHUNKED_CHECKSUMS},
-    "qurator": ${QURATOR}
+    "qurator": ${QURATOR},
+    "stackVersion": "${STACK_VERSION}"
 }

catalog/internals/webpack/webpack.base.js

@@ -9,9 +9,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
-const { execSync } = require('child_process')
-
-const revisionHash = execSync('git rev-parse HEAD').toString()
 
 class RevertPathOverwriteByPerspective {
   apply(compiler) {
@@ -144,7 +141,6 @@ module.exports = (options) => ({
     // NODE_ENV is exposed automatically based on the "mode" option
     new webpack.EnvironmentPlugin({
       LOGGER_REDUX: process.env.LOGGER_REDUX || 'enabled',
-      REVISION_HASH: revisionHash,
     }),
 
     new webpack.ProvidePlugin({