Show release version in Footer

.github/workflows/deploy-catalog.yaml

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

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

@@ -4,15 +4,18 @@
 
 import * as Intercom from 'components/Intercom'
 import Logo from 'components/Logo'
+import Skeleton from 'components/Skeleton'
 import cfg from 'constants/config'
 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 GQL from 'utils/GraphQL'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import copyToClipboard from 'utils/clipboard'
 
+import STACK_QUERY from 'utils/Stack.generated'
+
 import bg from './bg.png'
 import iconFacebook from './icon-facebook.svg'
 import iconGithub from './icon-github.svg'
@@ -33,45 +36,54 @@
 }))
 
 function Version() {
+  const { stack } = GQL.useQueryS(STACK_QUERY)
   const classes = useVersionStyles()
   const { push } = Notifications.use()
   const handleCopy = React.useCallback(() => {
-    copyToClipboard(process.env.REVISION_HASH)
+    copyToClipboard(stack.version || '')
     push('Web catalog container hash has been copied to clipboard')
-  }, [push])
+  }, [push, stack.version])
   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 product revision hash to clipboard"
+      variant="caption"
+    >
+      Version: {stack.version}
+    </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 +92,7 @@
       '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 +126,9 @@
       `,
     },
   },
+  logoLink: {
+    display: 'block',
+  },
 }))
 
 export default function Footer() {
@@ -137,9 +152,9 @@
                 <FooterLogo />
               </a>
             ) : (
-              <M.Box component={Link} to={urls.home()} display="block">
+              <Link className={classes.logoLink} to={urls.home()}>
                 <FooterLogo />
-              </M.Box>
+              </Link>
             )}
           </M.Box>
 
@@ -195,7 +210,9 @@
           </M.Box>
         </M.Container>
         <M.Container maxWidth="lg">
-          <Version />
+          <React.Suspense fallback={<Skeleton width={80} height={14} />}>
+            <Version />
+          </React.Suspense>
         </M.Container>
       </footer>
     </M.MuiThemeProvider>

catalog/app/components/Layout/Layout.tsx

@@ -3,10 +3,40 @@
 import * as M from '@material-ui/core'
 
 import Footer from 'components/Footer'
+import * as style from 'constants/style'
 import * as Bookmarks from 'containers/Bookmarks'
 import * as NavBar from 'containers/NavBar'
+import { createBoundary } from 'utils/ErrorBoundary'
 import * as NamedRoutes from 'utils/NamedRoutes'
 
+const useComponentErrorStyles = M.makeStyles((t) => ({
+  root: {
+    background: t.palette.secondary.dark,
+    position: 'relative',
+  },
+  container: {
+    color: t.palette.error.light,
+    padding: t.spacing(2),
+  },
+}))
+
+function ComponentError() {
+  const classes = useComponentErrorStyles()
+  return (
+    <div className={classes.root}>
+      <M.Container maxWidth="lg" className={classes.container}>
+        <M.Typography>Failed to render component</M.Typography>
+      </M.Container>
+    </div>
+  )
+}
+
+const ErrorBoundary = createBoundary(() => () => (
+  <M.MuiThemeProvider theme={style.navTheme}>
+    <ComponentError />
+  </M.MuiThemeProvider>
+))
+
 const useRootStyles = M.makeStyles({
   root: {
     overflowX: 'hidden',
@@ -49,11 +79,11 @@
   return (
     <Root dark={dark}>
       <NavBar.Provider>
-        {bare ? <NavBar.Container /> : <NavBar.NavBar />}
+        <ErrorBoundary>{bare ? <NavBar.Container /> : <NavBar.NavBar />}</ErrorBoundary>
         {!!pre && pre}
         {!!children && <M.Box p={4}>{children}</M.Box>}
         <M.Box flexGrow={1} />
-        {!!isHomepage && isHomepage.isExact && <Footer />}
+        <ErrorBoundary>{!!isHomepage && isHomepage.isExact && <Footer />}</ErrorBoundary>
         {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 @@
   },
 }))
 
-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 @@
     />
   )
 }
-
-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/model/graphql/schema.generated.ts

@@ -4176,6 +4176,18 @@ export default {
               },
             ],
           },
+          {
+            name: 'stack',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'Stack',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
           {
             name: 'subscription',
             type: {
@@ -5015,6 +5027,25 @@ export default {
         ],
         interfaces: [],
       },
+      {
+        kind: 'OBJECT',
+        name: 'Stack',
+        fields: [
+          {
+            name: 'version',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
       {
         kind: 'OBJECT',
         name: 'Status',

catalog/app/model/graphql/types.generated.ts

@@ -863,6 +863,7 @@ export interface Query {
   readonly searchPackages: PackagesSearchResult
   readonly searchMoreObjects: ObjectsSearchMoreResult
   readonly searchMorePackages: PackagesSearchMoreResult
+  readonly stack: Stack
   readonly subscription: SubscriptionState
   readonly admin: AdminQueries
   readonly policies: ReadonlyArray<Policy>
@@ -1078,6 +1079,11 @@ export interface SsoConfigConflict {
   readonly _: Maybe<Scalars['Boolean']>
 }
 
+export interface Stack {
+  readonly __typename: 'Stack'
+  readonly version: Scalars['String']
+}
+
 export interface Status {
   readonly __typename: 'Status'
   readonly canaries: ReadonlyArray<Canary>

catalog/app/utils/Stack.generated.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../model/graphql/types.generated'
+
+export type utils_StackQueryVariables = Types.Exact<{ [key: string]: never }>
+
+export type utils_StackQuery = { readonly __typename: 'Query' } & {
+  readonly stack: { readonly __typename: 'Stack' } & Pick<Types.Stack, 'version'>
+}
+
+export const utils_StackDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'utils_Stack' },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'stack' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [{ kind: 'Field', name: { kind: 'Name', value: 'version' } }],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<utils_StackQuery, utils_StackQueryVariables>
+
+export { utils_StackDocument as default }

catalog/app/utils/Stack.graphql

@@ -0,0 +1,5 @@
+query {
+  stack {
+    version
+  }
+}

shared/graphql/schema.graphql

@@ -532,6 +532,10 @@ type Me {
 
 union SwitchRoleResult = Me | InvalidInput | OperationError
 
+type Stack {
+  version: String!
+}
+
 type Query {
   me: Me
 
@@ -554,6 +558,7 @@ type Query {
   ): PackagesSearchResult!
   searchMoreObjects(after: String!, size: Int = 30): ObjectsSearchMoreResult!
   searchMorePackages(after: String!, size: Int = 30): PackagesSearchMoreResult!
+  stack: Stack!
   subscription: SubscriptionState!
 
   admin: AdminQueries! @admin