Merge master

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.0
 jobs:
   acceptance:
     docker:
-      - image: circleci/node:8-stretch-browsers
+      - image: circleci/node:10-stretch-browsers
     parallelism: 1
     steps:
       - add_ssh_keys
@@ -44,7 +44,7 @@ jobs:
             hokusai registry push --tag $CIRCLE_SHA1 --force --overwrite
   publish_staging_assets:
     docker:
-      - image: circleci/node:8-stretch-browsers
+      - image: circleci/node:10-stretch-browsers
     steps:
       - add_ssh_keys
       - checkout
@@ -58,7 +58,7 @@ jobs:
             - manifest.json
   publish_release_assets:
     docker:
-      - image: circleci/node:8-stretch-browsers
+      - image: circleci/node:10-stretch-browsers
     steps:
       - add_ssh_keys
       - checkout

.nvmrc

@@ -1 +1 @@
-8.12
+10.13

.prettierignore

@@ -1 +1,2 @@
 __generated__
+src/desktop/components/react/stitch_components/index.tsx

CONTRIBUTING.md

@@ -18,11 +18,11 @@ git remote add upstream https://github.com/artsy/force.git
 
 ## Run Force
 
-Install [NVM](https://github.com/creationix/nvm) and Node 8.
+Install [NVM](https://github.com/creationix/nvm) and Node 10.
 
 ```sh
-nvm install 8
-nvm alias default 8
+nvm install 10
+nvm alias default 10
 ```
 
 Install node modules with Yarn.

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8.12.0
+FROM node:10.14.1
 ARG commit_hash
 RUN test -n "$commit_hash"
 

app.json

@@ -179,9 +179,6 @@
     "METAPHYSICS_ENDPOINT": {
       "required": true
     },
-    "MIXPANEL_ID": {
-      "required": true
-    },
     "MOBILE_MARKETING_SIGNUP_MODALS": {
       "required": true
     },

docs/rolling_back.md

@@ -0,0 +1,23 @@
+## How to Rollback (on Kubernetes, deployed w/ Hokusai)
+
+So, you're reading this doc, in which case either nothing is on fire and you're simply educating yourself (yay!), or, there's a problem and you need to rollback Force. Take a deep breath, and read on.
+
+1. Run `hokusai registry images`. You'll see output like the below.
+
+![list of images](images/hokusai_images.png "Hokusai Images")
+
+2. Locate the name of a tag you want to deploy. In this case, since we're rolling back, it'll be the previous tag of the form `production-YYYY-mm-dd..`
+
+![specific image](images/single_image.png "Last Prod Image")
+
+3. Locate the Circle CI deploy process that corresponded to the deploy you are rolling back to. You may need to scroll back in the build history until you find it. One such example is: https://circleci.com/workflow-run/9fec809a-d096-4fc0-88b7-82419ada519d
+
+4. Open up the final step, `deploy_hokusai_production`, and expand the 'Echo Manifest' step. This is a config variable that changes with each deploy, and needs to be set manually during the rollback.
+
+![echo manifest](images/echo_manifest.png "Echo Manifest")
+
+5. Copy the long value into a text editor, and add single quotes around the entire thing. Then copy it to your clipboard.
+
+6. Run the following command to set the config in the environment. `hokusai production env set ASSET_MANIFEST=...clipboard contents...`
+
+7. When that completes, run the following command to deploy the desired image that you've located above. `hokusai production deploy production--2018-11-21--20-05-37`

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": "8.12.x",
+    "node": "10",
     "yarn": "1.x.x"
   },
   "scripts": {
@@ -50,11 +50,12 @@
     "react-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-artsy.5/react-relay-1.5.0-artsy.5.tgz"
   },
   "dependencies": {
-    "@artsy/express-reloadable": "^1.3.1",
-    "@artsy/palette": "^2.18.1",
-    "@artsy/passport": "^1.1.0",
-    "@artsy/reaction": "^6.1.8",
-    "@artsy/stitch": "^2.0.0",
+    "@airbnb/node-memwatch": "^1.0.2",
+    "@artsy/express-reloadable": "1.4.0",
+    "@artsy/palette": "2.23.2",
+    "@artsy/passport": "1.1.0",
+    "@artsy/reaction": "9.1.12",
+    "@artsy/stitch": "3.1.0",
     "@babel/core": "^7.0.0",
     "@babel/node": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
@@ -98,7 +99,7 @@
     "bem-cn-lite": "^3.0.0",
     "bluebird": "^3.4.6",
     "bluebird-q": "^2.1.1",
-    "blueimp-file-upload": "9.9.0",
+    "blueimp-file-upload": "9.22.1",
     "body-parser": "^1.14.1",
     "bucket-assets": "^1.0.2",
     "chalk": "^2.4.1",
@@ -158,7 +159,6 @@
     "lodash.isinteger": "^4.0.4",
     "lodash.merge": "^4.6.0",
     "mailcheck": "^1.1.1",
-    "memwatch-ng": "^1.2.0",
     "moment": "~2.16.0",
     "moment-timezone": "^0.5.5",
     "moment-twitter": "^0.2.0",
@@ -238,14 +238,15 @@
     "@types/react-dom": "^16.0.7",
     "@types/styled-system": "^3.0.4",
     "@types/webpack": "^4.4.11",
+    "@types/webpack-env": "^1.13.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "benv": "^3.3.0",
     "cache-loader": "^1.2.2",
     "coffee-loader": "^0.8.0",
     "core-js": "^2.5.7",
     "danger": "^6.0.2",
-    "electron": "1.7.8",
+    "electron": "1.7.16",
     "enzyme": "^3.4.4",
     "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^5.6.1",
@@ -265,7 +266,7 @@
     "husky": "^0.14.3",
     "imagesloaded": "^4.1.1",
     "inquirer": "^1.2.3",
-    "jest": "^23.5.2",
+    "jest": "^23.6.0",
     "jest-coffee-preprocessor": "^1.0.0",
     "jsdom": "^11.0.0",
     "jsdom-global": "^3.0.2",

renovate.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "@artsy"
+  ],
+  "assignees": [
+    "zephraph",
+    "damassi",
+    "sweir27"
+  ]
+}

src/desktop/analytics/README.md

@@ -139,7 +139,7 @@ Open Chrome dev tools `cmd + opt + i`, click on the "Network" tab, click the "Fi
 
 ![](https://s3.amazonaws.com/f.cl.ly/items/2Z2K0X1E3d0O141D1d1n/Image%202015-04-14%20at%201.09.48%20PM.png)
 
-Filter the calls according the service you need to debug by typing in the "Filter" input on the left, e.g. "mixpanel". Then click on a network call you think is reponsible for the even you want to track. This will bring up a panel that looks like this:
+Filter the calls according the service you need to debug by typing in the "Filter" input on the left, e.g. "segment". Then click on a network call you think is reponsible for the even you want to track. This will bring up a panel that looks like this:
 
 ![](https://s3.amazonaws.com/f.cl.ly/items/1p3M3N3o3O3z0s0P2C28/Image%202015-04-14%20at%201.20.24%20PM.png)
 

src/desktop/analytics/criteo.js

@@ -63,7 +63,7 @@ if (pathSplit[1] === "auctions") {
     )
   } else {
     window.criteo_q.push(
-      { event: "setAccount", account: sd.CRITEO_ARTWORKS_ACCOUNT_NUMBER },
+      { event: "setAccount", account: sd.CRITEO_AUCTIONS_ACCOUNT_NUMBER },
       { event: "setSiteType", type: "d" },
       { event: "setEmail", email: userEmail },
       { event: "viewItem", item: sd.COMMERCIAL.artwork._id }
@@ -72,7 +72,7 @@ if (pathSplit[1] === "auctions") {
   // ARTWORKS viewBasket
   analyticsHooks.on("inquiry_questionnaire:modal:opened", function(data) {
     window.criteo_q.push(
-      { event: "setAccount", account: sd.CRITEO_ARTWORKS_ACCOUNT_NUMBER },
+      { event: "setAccount", account: sd.CRITEO_AUCTIONS_ACCOUNT_NUMBER },
       { event: "setSiteType", type: "d" },
       { event: "setEmail", email: userEmail },
       {
@@ -90,7 +90,7 @@ if (pathSplit[1] === "auctions") {
   // ARTWORKS trackTransaction
   analyticsHooks.on("inquiry_questionnaire:inquiry:sync", function(data) {
     window.criteo_q.push(
-      { event: "setAccount", account: sd.CRITEO_ARTWORKS_ACCOUNT_NUMBER },
+      { event: "setAccount", account: sd.CRITEO_AUCTIONS_ACCOUNT_NUMBER },
       { event: "setSiteType", type: "d" },
       { event: "setEmail", email: userEmail },
       {
@@ -111,7 +111,7 @@ if (pathSplit[1] === "auctions") {
     // https://www.artsy.net/collect - (ARTWORKS viewHome)
     //              0          1
     window.criteo_q.push(
-      { event: "setAccount", account: sd.CRITEO_ARTWORKS_ACCOUNT_NUMBER },
+      { event: "setAccount", account: sd.CRITEO_AUCTIONS_ACCOUNT_NUMBER },
       { event: "setSiteType", type: "d" },
       { event: "setEmail", email: userEmail },
       { event: "viewHome" }

src/desktop/apps/article/__tests__/routes.test.js

@@ -6,7 +6,14 @@ import Channel from "desktop/models/channel.coffee"
 import { getCurrentUnixTimestamp } from "reaction/Components/Publishing/Constants"
 
 const rewire = require("rewire")("../routes")
-const { amp, classic, editorialSignup, index, subscribedToEditorial } = rewire
+const {
+  amp,
+  classic,
+  editorialSignup,
+  index,
+  isCustomEditorial,
+  subscribedToEditorial,
+} = rewire
 
 describe("Article Routes", () => {
   let req
@@ -39,6 +46,7 @@ describe("Article Routes", () => {
       rewire.__set__("sd", {
         ARTSY_EDITORIAL_CHANNEL: "123",
         APP_URL: "https://artsy.net",
+        EOY_2018_ARTISTS: "5bf30690d8b9430baaf6c6de",
       }),
       rewire.__set__("sailthru", {
         apiPost: sailthruApiPost,
@@ -388,6 +396,39 @@ describe("Article Routes", () => {
         })
       })
     })
+
+    describe("Custom editorial", () => {
+      it("#isCustomEditorial returns key if article.id matches custom editorial list", () => {
+        isCustomEditorial("5bf30690d8b9430baaf6c6de").should.containEql(
+          "EOY_2018_ARTISTS"
+        )
+      })
+
+      it("Adds custom editorial var and no-header class to stitch args", done => {
+        const data = {
+          article: _.extend({}, fixtures.article, {
+            slug: "foobar",
+            channel_id: "123",
+            layout: "feature",
+            id: "5bf30690d8b9430baaf6c6de",
+          }),
+        }
+        rewire.__set__(
+          "positronql",
+          sinon.stub().returns(Promise.resolve(data))
+        )
+        const stitch = sinon.stub()
+        rewire.__set__("stitch", stitch)
+        req.path = "/article/foobar"
+        index(req, res, next).then(() => {
+          stitch.args[0][0].locals.bodyClass.should.containEql("body-no-header")
+          stitch.args[0][0].data.customEditorial.should.containEql(
+            "EOY_2018_ARTISTS"
+          )
+          done()
+        })
+      })
+    })
   })
 
   describe("#classic", () => {

src/desktop/apps/article/components/App.js

@@ -16,6 +16,7 @@ export default hot(module)(
   class App extends React.Component {
     static propTypes = {
       article: PropTypes.object,
+      customEditorial: PropTypes.string,
     }
 
     getArticleLayout = () => {

src/desktop/apps/article/components/layouts/Article.tsx

@@ -1,8 +1,9 @@
 import React from "react"
 import { once } from "lodash"
-
-import { Article } from "reaction/Components/Publishing"
-import { ArticleProps } from "reaction/Components/Publishing/Article"
+import {
+  Article,
+  ArticleProps,
+} from "@artsy/reaction/dist/Components/Publishing/Article"
 import {
   ModalOptions,
   ModalType,
@@ -108,6 +109,7 @@ export default class ArticleLayout extends React.Component<
   render() {
     const {
       article,
+      customEditorial,
       isSuper,
       isLoggedIn,
       isMobile,
@@ -116,7 +118,7 @@ export default class ArticleLayout extends React.Component<
       templates: { SuperArticleFooter, SuperArticleHeader } = {} as any,
     } = this.props
 
-    const isStatic = isSuper || article.seriesArticle
+    const isStatic = isSuper || article.seriesArticle || customEditorial
 
     return (
       <div>
@@ -131,6 +133,7 @@ export default class ArticleLayout extends React.Component<
         {isStatic ? (
           <Article
             article={article}
+            customEditorial={customEditorial}
             display={article.display}
             isMobile={isMobile}
             isLoggedIn={isLoggedIn}

src/desktop/apps/article/queries/display.js

@@ -27,6 +27,7 @@ export const displayFragment = `
     cover_image_url: cover_img_url
     body
     disclaimer
+    has_cover_overlay
     headline
     layout
     link {

src/desktop/apps/article/routes.js

@@ -1,5 +1,6 @@
 import * as _ from "underscore"
 import embed from "particle"
+import { findKey } from "lodash"
 import { URL } from "url"
 import markdown from "desktop/components/util/markdown.coffee"
 import App from "desktop/apps/article/components/App"
@@ -16,6 +17,8 @@ import { data as _sd } from "sharify"
 import { stitch as _stitch } from "@artsy/stitch"
 import { stringifyJSONForWeb } from "desktop/components/util/json.coffee"
 import { getCurrentUnixTimestamp } from "reaction/Components/Publishing/Constants"
+import { createMediaStyle } from "@artsy/reaction/dist/Utils/Responsive"
+
 const { SAILTHRU_KEY, SAILTHRU_SECRET } = require("config")
 const sailthru = require("sailthru-client").createSailthruClient(
   SAILTHRU_KEY,
@@ -124,12 +127,15 @@ export async function index(req, res, next) {
     const isMobile = IS_MOBILE
     const isTablet = IS_TABLET
     const jsonLD = stringifyJSONForWeb(articleModel.toJSONLD())
+    const customEditorial = isCustomEditorial(article.id)
 
     // Email signup
     const isLoggedIn = typeof CURRENT_USER !== "undefined"
     const showTooltips = !isMobile && !isTablet
     const renderTime = getCurrentUnixTimestamp()
 
+    res.locals.sd.RESPONSIVE_CSS = createMediaStyle()
+
     const layout = await stitch({
       basePath: res.app.get("views"),
       layout: layoutTemplate,
@@ -149,6 +155,7 @@ export async function index(req, res, next) {
       },
       data: {
         article,
+        customEditorial,
         isSuper,
         isLoggedIn,
         isMobile,
@@ -172,7 +179,7 @@ const getBodyClass = article => {
   const isSuper = article.is_super_article || article.is_super_sub_article
   const isFullscreen =
     article.hero_section && article.hero_section.type === "fullscreen"
-  if (isSuper && isFullscreen) {
+  if ((isSuper && isFullscreen) || isCustomEditorial(article.id)) {
     bodyClass = bodyClass + " body-no-header"
   }
   return bodyClass
@@ -318,3 +325,13 @@ export const editorialSignup = (req, res, next) => {
 
 export const redirectPost = (req, res, next) =>
   res.redirect(301, req.url.replace("post", "article"))
+
+export const isCustomEditorial = id => {
+  const customIds = [sd.EOY_2018_ARTISTS, sd.EOY_2018_CULTURE]
+
+  if (customIds.includes(id)) {
+    return findKey(sd, val => {
+      return val === id
+    })
+  }
+}