Simplify A/B test lookup via express-http-context

.babelrc

@@ -19,6 +19,8 @@
       }
     ],
     "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
     [
       "relay",
       {

package.json

@@ -9,6 +9,7 @@
   "peerDependencies": {
     "@artsy/palette": "^4.16.0 || ^5.0.0 || ^7.0.0",
     "@sentry/browser": "^4.2.3",
+    "express-http-context": "^1.2.3",
     "flickity": "2.1.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
@@ -57,6 +58,8 @@
     "@babel/plugin-proposal-class-properties": "7.3.4",
     "@babel/plugin-proposal-decorators": "7.3.0",
     "@babel/plugin-proposal-json-strings": "7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-import-meta": "7.0.0",
     "@babel/preset-env": "7.3.4",
@@ -115,6 +118,7 @@
     "dotenv": "4.0.0",
     "enzyme": "3.8.0",
     "enzyme-adapter-react-16": "1.7.1",
+    "express-http-context": "^1.2.3",
     "flickity": "2.1.2",
     "fork-ts-checker-notifier-webpack-plugin": "0.6.2",
     "fork-ts-checker-webpack-plugin": "0.4.10",

src/Apps/Artwork/ArtworkApp.tsx

@@ -31,6 +31,7 @@ export interface Props {
   artwork: ArtworkApp_artwork
   tracking?: TrackingProp
   routerPathname: string
+  referrer: string
 }
 
 declare const window: any
@@ -53,6 +54,7 @@ export class ArtworkApp extends React.Component<Props> {
   trackPageview() {
     const {
       artwork: { listPrice, availability, is_offerable, is_acquireable },
+      referrer,
     } = this.props
 
     // FIXME: This breaks our global pageview tracking in the router level.
@@ -64,6 +66,7 @@ export class ArtworkApp extends React.Component<Props> {
       offerable: is_offerable,
       availability,
       price_listed: !!listPrice,
+      referrer,
     }
 
     if (typeof window.analytics !== "undefined") {
@@ -222,7 +225,14 @@ export class ArtworkApp extends React.Component<Props> {
             </Col>
           </Row>
 
-          <div id="lightbox-container" />
+          <div
+            id="lightbox-container"
+            style={{
+              position: "absolute",
+              top: 0,
+              zIndex: 1100, // over top nav
+            }}
+          />
           <SystemContextConsumer>
             {({ mediator }) => <>{this.enableIntercomForBuyers(mediator)}</>}
           </SystemContextConsumer>
@@ -236,11 +246,14 @@ export const ArtworkAppFragmentContainer = createFragmentContainer(
   (props: Props) => {
     const {
       match: {
-        location: { pathname },
+        location: { pathname, state },
       },
     } = useContext(RouterContext)
 
-    return <ArtworkApp {...props} routerPathname={pathname} />
+    const referrer = state && state.previousHref
+    return (
+      <ArtworkApp {...props} routerPathname={pathname} referrer={referrer} />
+    )
   },
   {
     artwork: graphql`

src/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkActions.tsx

@@ -87,7 +87,7 @@ export class ArtworkActions extends React.Component<
     if (is_downloadable || this.isAdmin) {
       const artistNames = artists.map(({ name }) => name).join(", ")
       const filename = slugify(compact([artistNames, title, date]).join(" "))
-      const downloadableImageUrl = `${sd.APP_URL}${href}/download/${filename}.jpg` // prettier-ignore
+      const downloadableImageUrl = `${href}/download/${filename}.jpg` // prettier-ignore
       return downloadableImageUrl
     }
   }

src/Apps/Artwork/Components/OtherWorks/Header.tsx

@@ -1,4 +1,5 @@
 import { Button, Flex, Serif } from "@artsy/palette"
+import { RouterLink } from "Artsy/Router/RouterLink"
 import React from "react"
 
 interface HeaderProps {
@@ -16,14 +17,11 @@ export const Header: React.SFC<HeaderProps> = props => {
         {title}
       </Serif>
       {buttonHref && (
-        <Button
-          variant="secondaryOutline"
-          mb={3}
-          // FIXME: Move to <Link> component once https://github.com/artsy/palette/pull/130 is merged
-          onClick={() => (window.location.href = buttonHref)}
-        >
-          View all
-        </Button>
+        <RouterLink to={buttonHref}>
+          <Button variant="secondaryOutline" mb={3}>
+            View all
+          </Button>
+        </RouterLink>
       )}
       {children}
     </Flex>

src/Artsy/Analytics/trackingMiddleware.ts

@@ -71,7 +71,7 @@ export function trackingMiddleware(options: TrackingMiddlewareOptions = {}) {
           }
 
           // TODO: Remove after EXPERIMENTAL_APP_SHELL AB test ends.
-          if (getENV("EXPERIMENTAL_APP_SHELL")) {
+          if (sd.CLIENT_NAVIGATION_V3) {
             trackExperimentViewed("client_navigation_v3")
           }
 

src/Artsy/Relay/renderWithLoadProgress.tsx

@@ -71,7 +71,7 @@ export function renderWithLoadProgress<P>(
   initialProps: object = {},
   wrapperProps: object = {},
   spinnerProps: SpinnerProps = {
-    delay: 800,
+    delay: 1000,
   }
 ): LoadProgressRenderer<P> {
   // TODO: We need design for retrying or the approval to use the iOS design.

src/Artsy/Router/makeAppRoutes.tsx

@@ -38,7 +38,15 @@ export function makeAppRoutes(routeList: RouteList[]): RouteConfig[] {
         const foundUrl = props.router.matcher.matchRoutes(routes, url)
 
         if (foundUrl) {
-          props.router.push(url)
+          const location = props.router.createLocation(url)
+          const previousHref = window.location.href
+
+          props.router.push({
+            ...location,
+            state: {
+              previousHref,
+            },
+          })
         } else {
           window.location.assign(url)
         }

src/Utils/getENV.tsx

@@ -2,6 +2,14 @@ import { data as sd } from "sharify"
 
 export function getENV(ENV_VAR) {
   const isServer = typeof window === "undefined"
-  const envVar = isServer ? process.env[ENV_VAR] : sd[ENV_VAR]
+
+  let envVar
+  if (isServer) {
+    const httpContext = require("express-http-context")
+    envVar = httpContext.get(ENV_VAR) ?? process.env[ENV_VAR]
+  } else {
+    envVar = sd[ENV_VAR]
+  }
+
   return envVar
 }

typings/sharify.d.ts

@@ -20,6 +20,7 @@ declare module "sharify" {
       readonly APP_URL: string
       readonly ARTIST_COLLECTIONS_RAIL?: string // TODO: remove after CollectionsRail a/b test
       readonly ARTIST_COLLECTIONS_RAIL_IDS: string[]
+      readonly CLIENT_NAVIGATION_V3: "experiment" | "control" // TODO: Remove after A/B test.
       readonly CMS_URL: string
       readonly ENABLE_PRICE_TRANSPARENCY: string
       readonly ENABLE_REQUEST_CONDITION_REPORT: string