Merge branch 'develop' into reskin-profile

* develop: fix indexOf on null image ci: deploy develop branch on Dev env catch unhandled exceptions Fix CMS-related error for NotFound entries JSON.stringify all objects for error dump JSON.stringify CMS errors ci: on test dump action for inspection fix test fail add opacity enhance mm dashboard add more infos for debug Add error and res for logging more details ci: deploy develop branch to QA env ci: deploy fix-security-headers to Stag env combine tco headers with veterans add csp header for tco domain fix for social thumb ci: on beta fix social share for Contentful routes
topcoder-platform · Jun 14, 2022 · 5d3241b · 5d3241b
2 parents 96c7a68 + a4123f9
commit 5d3241b
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 51 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -357,7 +357,7 @@ workflows:
           filters:
             branches:
               only:
-                - circleci-fix
+                - debug-CMS-error
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global
@@ -380,7 +380,7 @@ workflows:
             branches:
               only:
                 - develop
-                - stat_marathon_match_link
+                - fix-security-headers
       # Production builds are exectuted
       # when PR is merged to the master
       # Don't change anything in this configuration

diff --git a/src/server/index.js b/src/server/index.js
@@ -50,6 +50,8 @@ ts = moment(ts.timestamp).valueOf();
 const sw = `sw.js${process.env.NODE_ENV === 'production' ? '' : '?debug'}`;
 const swScope = '/challenges'; // we are currently only interested in improving challenges pages
 
+const tcoPattern = new RegExp(/^tco\d{2}\.topcoder(?:-dev)?\.com$/i);
+
 const EXTRA_SCRIPTS = [
   `<script type="application/javascript">
   if('serviceWorker' in navigator){
@@ -135,13 +137,14 @@ async function onExpressJsSetup(server) {
     res.header('Referrer-Policy', 'strict-origin-when-cross-origin');
     res.header('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
 
-    if (req.url.startsWith('/__community__/veterans') || req.hostname === 'veterans.topcoder.com') {
+    if (req.url.startsWith('/__community__/veterans') || req.hostname === 'veterans.topcoder.com' || req.url.startsWith('/__community__/tco') || tcoPattern.test(req.hostname)) {
       res.header(
         'Content-Security-Policy',
         "default-src 'self';"
         + " script-src 'report-sample' 'self' 'unsafe-inline' 'unsafe-eval'"
           + ` ${config.CDN.PUBLIC}`
           + ' http://www.google-analytics.com'
+          + ' https://www.google-analytics.com'
           + ' https://43d132d5dbff47c59d9d53ad448f93c2.js.ubembed.com'
           + ' https://assets.ubembed.com'
           + ' https://assets.zendesk.com'
@@ -187,6 +190,7 @@ async function onExpressJsSetup(server) {
           + ` ${config.URL.AUTH}`
           + ' https://www.youtube.com;'
         + " img-src 'self'"
+          + ' data:'
           + ` ${config.CDN.PUBLIC}`
           + ' https://cdn.segment.com'
           + ' https://d1of0acg2orgco.cloudfront.net'
@@ -196,11 +200,14 @@ async function onExpressJsSetup(server) {
           + ' https://heapanalytics.com'
           + ' https://q.quora.com'
           + ' https://topcoder-prod-media.s3.amazonaws.com'
+          + ' https://topcoder-dev-media.s3.amazonaws.com'
           + ' https://www.facebook.com'
           + ' https://www.google-analytics.com'
           + ' https://www.google.com'
           + ' https://www.googletagmanager.com'
-          + ' https://i.ytimg.com;'
+          + ' https://i.ytimg.com'
+          + ' https://images.contentful.com'
+          + ' https://d0.awsstatic.com/logos/;'
         + " manifest-src 'self';"
         + " media-src 'self';"
         + ' report-uri https://623d4c23f90d055298b24042.endpoint.csper.io/?v=0;'

diff --git a/src/shared/actions/contentful.js b/src/shared/actions/contentful.js
@@ -3,7 +3,7 @@ import { getService } from 'services/contentful';
 import { config, redux } from 'topcoder-react-utils';
 import { removeTrailingSlash } from 'utils/url';
 import { menuItemBuilder, target as urlTarget } from 'utils/contentful';
-import { services } from 'topcoder-react-lib';
+import { services, logger } from 'topcoder-react-lib';
 
 const ERRMSG_UNKNOWN_TARGET = 'Unknown action target';
 
@@ -91,15 +91,19 @@ async function getContentDone(operationId, contentId, target, preview, spaceName
     environment,
   });
   let content;
-  switch (target) {
-    case TARGETS.ASSETS:
-      content = await service.getAsset(contentId);
-      break;
-    case TARGETS.ENTRIES:
-      content = await service.getEntry(contentId);
-      break;
-    default:
-      throw new Error(ERRMSG_UNKNOWN_TARGET);
+  try {
+    switch (target) {
+      case TARGETS.ASSETS:
+        content = await service.getAsset(contentId);
+        break;
+      case TARGETS.ENTRIES:
+        content = await service.getEntry(contentId);
+        break;
+      default:
+        throw new Error(ERRMSG_UNKNOWN_TARGET);
+    }
+  } catch (e) {
+    logger.error('getContentDone error', e);
   }
 
   return {
@@ -141,15 +145,19 @@ async function queryContentDone(operationId, queryId, target,
     environment,
   });
   let data;
-  switch (target) {
-    case TARGETS.ASSETS:
-      data = await service.queryAssets(query);
-      break;
-    case TARGETS.ENTRIES:
-      data = await service.queryEntries(query);
-      break;
-    default:
-      throw new Error(ERRMSG_UNKNOWN_TARGET);
+  try {
+    switch (target) {
+      case TARGETS.ASSETS:
+        data = await service.queryAssets(query);
+        break;
+      case TARGETS.ENTRIES:
+        data = await service.queryEntries(query);
+        break;
+      default:
+        throw new Error(ERRMSG_UNKNOWN_TARGET);
+    }
+  } catch (e) {
+    logger.error('queryContentDone error', e);
   }
 
   return {

diff --git a/src/shared/components/Contentful/Route.jsx b/src/shared/components/Contentful/Route.jsx
@@ -47,7 +47,7 @@ function ChildRoutesLoader(props) {
               <React.Fragment>
                 <MetaTags
                   description={fields.description}
-                  image={fields.thumbnail}
+                  image={fields.socialThumbnail}
                   siteName={fields.socialSiteName}
                   socialDescription={fields.socialDescription}
                   socialTitle={fields.socialTitle}

diff --git a/src/shared/components/MetaTags.jsx b/src/shared/components/MetaTags.jsx
@@ -24,7 +24,10 @@ function MetaTags({
   feed,
   feedTitle,
 }) {
-  const img = `${domain}${image}`;
+  let img = `${domain}${image}`;
+  if (image && (image.indexOf('http://') === 0 || image.indexOf('https://') === 0)) {
+    img = `${image}`;
+  }
   const socTitle = socialTitle || title;
   const socDesc = socialDescription || description;
   return (

diff --git a/src/shared/components/challenge-detail/MMDashboard/Graph/index.jsx b/src/shared/components/challenge-detail/MMDashboard/Graph/index.jsx
@@ -1,16 +1,18 @@
 /* eslint-disable react/no-this-in-sfc */
-import React from 'react';
+import React, { useState } from 'react';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import PT from 'prop-types';
 import moment from 'moment';
-import { getRatingColor } from 'utils/tc';
+import { getHighlightedColor, getRatingColor, getUnSelectedColors } from 'utils/tc';
 import DefaultUserImage from 'assets/images/ico-user-default.png';
 
-import './styles.scss';
 import _ from 'lodash';
+import styles from './styles.scss';
 
 export default function Graph({ statisticsData, baseline, awardLine }) {
+  const [point, setPoint] = useState(null);
+
   const flatData = [];
   const dates = [];
   _.each(statisticsData, (entry) => {
@@ -24,28 +26,71 @@ export default function Graph({ statisticsData, baseline, awardLine }) {
     });
   });
 
+  const pointDatas = _.map(flatData, (data) => {
+    let color;
+    let isSelected = false;
+    if (point) {
+      isSelected = point.customData.handle === data.handle;
+      if (isSelected) {
+        color = getHighlightedColor(data.rating || 0);
+      } else {
+        color = getUnSelectedColors(data.rating || 0);
+      }
+    } else {
+      color = data.ratingColor || getRatingColor(data.rating || 0);
+    }
+    return {
+      x: moment(data.created).valueOf(),
+      y: _.max([0, data.score ? (parseFloat(data.score)) : 0]),
+      name: data.handle,
+      color,
+      customData: data,
+      marker: {
+        enabled: true,
+        width: 'circle',
+        radius: isSelected ? 6 : 4,
+      },
+      className: !isSelected && point ? styles.selectedPoint : '',
+    };
+  });
+
   const options = {
+    plotOptions: {
+      line: {
+        events: {
+          click() {
+            this.group.toFront();
+          },
+        },
+      },
+    },
     chart: {
       type: 'scatter',
       backgroundColor: '#fff',
+      events: {
+        click: () => {
+          setPoint(null);
+        },
+      },
     },
     title: {
       text: '',
     },
     series: [
       {
-        data: _.map(flatData, data => ({
-          x: moment(data.created).valueOf(),
-          y: _.max([0, data.score ? (parseFloat(data.score)) : 0]),
-          name: data.handle,
-          color: data.ratingColor
-            || getRatingColor(data.rating
-            || 0),
-          customData: data,
-        })),
+        data: pointDatas,
         pointStart: moment(_.min(dates)).valueOf(),
         pointInterval: 24 * 3600 * 1000,
         backgroundColor: 'rgb(51,51,51)',
+        point: {
+          events: {
+            click: (e) => {
+              if (e && e.point) {
+                setPoint(e.point);
+              }
+            },
+          },
+        },
       },
     ],
     legend: {
@@ -106,23 +151,27 @@ export default function Graph({ statisticsData, baseline, awardLine }) {
     },
     tooltip: {
       formatter() {
-        const str = `
-          <div style="border-radius:4px; padding-top: 15px; padding-left: 10px;">
-            <img height="30" width="30" src="${this.point.customData.photoUrl || DefaultUserImage}" style="position: absolute; border-radius: 50%;" />
-            <p style="margin-left: 50px">${this.point.customData.handle}</p>
-            <br />
-            <p style="margin-left: 50px;">${this.point.customData.submissionCount} submissions</p>
-            <p style="margin-left: 50px;">Score: ${this.y}</p>
-            <p style="margin-left: 50px;">Submitted: ${moment(this.point.customData.created).format('MM/DD/YYYY')} </p>
-          </div>
-        `;
-        return str;
+        const currentPointer = this.point || point;
+        if (currentPointer) {
+          const str = `
+            <div style="border-radius:4px; padding-top: 15px; padding-left: 10px;">
+              <img height="30" width="30" src="${currentPointer.customData.photoUrl || DefaultUserImage}" style="position: absolute; border-radius: 50%;" />
+              <p style="margin-left: 50px">${currentPointer.customData.handle}</p>
+              <br />
+              <p style="margin-left: 50px;">${currentPointer.customData.submissionCount} submissions</p>
+              <p style="margin-left: 50px;">Score: ${this.y}</p>
+              <p style="margin-left: 50px;">Submitted: ${moment(currentPointer.customData.created).format('MM/DD/YYYY')} </p>
+            </div>
+          `;
+          return str;
+        }
+        return false;
       },
       useHTML: true,
       style: {
         color: '#fff',
       },
-      backgroundColor: 'rgb(51,51,51)',
+      backgroundColor: point ? '#2e2e2e' : 'rgb(51,51,51)',
       shared: true,
     },
   };

diff --git a/src/shared/components/challenge-detail/MMDashboard/Graph/styles.scss b/src/shared/components/challenge-detail/MMDashboard/Graph/styles.scss
@@ -21,3 +21,8 @@
     padding-right: 16px;
   }
 }
+
+.selectedPoint {
+  z-index: 1000 !important;
+  opacity: 0.9;
+}
diff --git a/src/shared/reducers/contentful/index.js b/src/shared/reducers/contentful/index.js
@@ -60,8 +60,8 @@ function create(init) {
     const spaceName = _.get(payload, 'spaceName') || config.CONTENTFUL.DEFAULT_SPACE_NAME;
     const environment = _.get(payload, 'environment') || config.CONTENTFUL.DEFAULT_ENVIRONMENT;
     const res = _.get(newState, `${spaceName}.${environment}`);
-    if (error || !res) {
-      logger.log('CMS-related error');
+    if ((error && payload && payload.sys && payload.sys.id !== 'NotFound') || !res) {
+      logger.log('CMS-related error', JSON.stringify(action), config.CONTENTFUL.DEFAULT_SPACE_NAME, config.CONTENTFUL.DEFAULT_ENVIRONMENT, JSON.stringify(res), JSON.stringify(newState));
       return state;
     }
     const st = state[spaceName][environment];

diff --git a/src/shared/utils/tc.js b/src/shared/utils/tc.js
@@ -122,12 +122,57 @@ export const RATING_COLORS = [{
   color: '#EF3A3A' /* Red */,
   limit: Infinity,
 }];
+
 export function getRatingColor(rating) {
   let i = 0; const r = Number(rating);
   while (RATING_COLORS[i].limit <= r) i += 1;
   return RATING_COLORS[i].color || 'black';
 }
 
+export const HIGHLIGHTED_RATING_COLORS = [{
+  color: '#464646' /* Grey */,
+  limit: 900,
+}, {
+  color: '#00ab00' /* Green */,
+  limit: 1200,
+}, {
+  color: '#3748ff' /* Blue */,
+  limit: 1500,
+}, {
+  color: '#ffe879' /* Yellow */,
+  limit: 2200,
+}, {
+  color: '#ff2a2a' /* Red */,
+  limit: Infinity,
+}];
+export function getHighlightedColor(rating) {
+  let i = 0; const r = Number(rating);
+  while (HIGHLIGHTED_RATING_COLORS[i].limit <= r) i += 1;
+  return HIGHLIGHTED_RATING_COLORS[i].color || 'black';
+}
+
+export const UNSELECTED_RATING_COLORS = [{
+  color: '#f3f3f3' /* Grey */,
+  limit: 900,
+}, {
+  color: '#e6f6e6' /* Green */,
+  limit: 1200,
+}, {
+  color: '#c5c8ef' /* Blue */,
+  limit: 1500,
+}, {
+  color: '#fff5c4' /* Yellow */,
+  limit: 2200,
+}, {
+  color: '#f47d7d' /* Red */,
+  limit: Infinity,
+}];
+export function getUnSelectedColors(rating) {
+  let i = 0; const r = Number(rating);
+  while (UNSELECTED_RATING_COLORS[i].limit <= r) i += 1;
+  return UNSELECTED_RATING_COLORS[i].color || 'black';
+}
+
 /**
  * Given ExpressJS HTTP request it extracts Topcoder auth tokens from cookies,
  * if they are present there and are not expired.