Merge branch 'develop' into milestone-20200924

Author: luizrrodrigues

.circleci/config.yml

@@ -239,14 +239,13 @@ workflows:
             branches:
               only:                
                 - feature-contentful
-                - hot-fix
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      
           filters:
             branches:
               only:
-                - hot-fix
+                - community-app-tests-poc
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
@@ -261,7 +260,6 @@ workflows:
           filters:
             branches:
               only:
-                - milestone-20200924
                 - develop
       # Production builds are exectuted 
       # when PR is merged to the master

__tests__/shared/components/ChallengeTile/__snapshots__/index.jsx.snap

@@ -202,12 +202,15 @@ exports[`renders marathon 1`] = `
       className="src-shared-components-ChallengeTile-___style__completed-challenge___3w5tT"
     >
       <header>
-        <a
+        <Link
           className="src-shared-components-ChallengeTile-___style__name___1jF7j"
-          href="https://community.topcoder.com/longcontest/stats/?module=ViewOverview&rd=17153"
+          replace={false}
+          to="/challenges/15404"
         >
-          2018 TCO Marathon
-        </a>
+          <span>
+            2018 TCO Marathon
+          </span>
+        </Link>
         <p
           className="src-shared-components-ChallengeTile-___style__subtrack-color___2AJaw"
         >

config/default.js

@@ -410,4 +410,5 @@ module.exports = {
   TC_EDU_SEARCH_BAR_MAX_RESULTS_EACH_GROUP: 3,
   POLICY_PAGES_PATH: '/policy',
   GIGS_PAGES_PATH: '/gigs',
+  START_PAGE_PATH: '/start',
 };

package-lock.json

@@ -137,7 +137,7 @@
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.0.4",
+    "topcoder-react-lib": "1000.22.7",
     "topcoder-react-ui-kit": "1000.1.0",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

package.json

@@ -2,7 +2,6 @@
  * Challenge tile.
  */
 /* eslint-env browser */
-import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -83,36 +82,27 @@ class ChallengeTile extends React.Component {
       margin: '10px 5px',
     };
 
-    const isDataScience = track === COMPETITION_TRACKS.DATA_SCIENCE;
     const isDevelopment = track === COMPETITION_TRACKS.DEVELOP;
     const isDesign = track === COMPETITION_TRACKS.DESIGN;
 
-    const roundId = isDataScience ? _.get(challenge, 'rounds.0.id') : 0;
-
     return (
       <div styleName="challenge tile" style={extraStyle}>
         <div styleName={outStyleName}>
           <div styleName="completed-challenge">
             <header>
-              { !isDataScience && (!challenge.isPrivate
+              { !challenge.isPrivate
                 ? (
                   <Link to={`/challenges/${challenge.id}`} styleName="name">
                     <span>
                       { challenge.name }
                     </span>
                   </Link>
-                ) : (
+                )
+                : (
                   <span>
                     { challenge.name }
                   </span>
-                )) }
-
-              { isDataScience
-                && (
-                <a styleName="name" href={`https://community.topcoder.com/longcontest/stats/?module=ViewOverview&rd=${roundId}`}>
-                  { challenge.name }
-                </a>
-                ) }
+                )}
 
               <p styleName="subtrack-color">
                 {underscoreReplace(type)}

src/assets/images/gig-blob.svg

@@ -15,7 +15,10 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import YouTubeVideo from 'components/YouTubeVideo';
 import moment from 'moment';
 import localStorage from 'localStorage';
-import { config, Link, isomorphy } from 'topcoder-react-utils';
+import { Helmet } from 'react-helmet';
+import {
+  config, Link, isomorphy,
+} from 'topcoder-react-utils';
 import qs from 'qs';
 // SVGs and assets
 import GestureIcon from 'assets/images/icon-gesture.svg';
@@ -110,9 +113,27 @@ export default class Article extends React.Component {
     if (isomorphy.isClientSide()) {
       shareUrl = encodeURIComponent(window.location.href);
     }
+    const description = htmlToText.fromString(
+      ReactDOMServer.renderToString(markdown(fields.content)),
+      {
+        ignoreHref: true,
+        ignoreImage: true,
+        singleNewLineParagraphs: true,
+        uppercaseHeadings: false,
+      },
+    ).substring(0, CONTENT_PREVIEW_LENGTH);
 
     return (
       <React.Fragment>
+        <Helmet>
+          <title>{fields.title}</title>
+          <meta name="title" property="og:title" content={fields.title} />
+          <meta name="description" property="og:description" content={description} />
+          <meta name="description" property="description" content={description} />
+          <meta name="twitter:description" content={description} />
+          <meta name="image" property="og:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : null} />
+          <meta name="twitter:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : null} />
+        </Helmet>
         {/* Banner */}
         {
           fields.featuredImage ? (

src/assets/images/img-gig-work.png

@@ -14,6 +14,7 @@ import { errors } from 'topcoder-react-lib';
 import { themr } from 'react-css-super-themr';
 import classnames from 'classnames';
 
+import defaultModalTheme from 'components/Leaderboard/ChallengeHistoryModal/styles.scss';
 import defaultStyle from './style.scss';
 
 const { fireErrorMessage } = errors;
@@ -102,7 +103,10 @@ class ContentfulModal extends React.Component {
                 className: classnames(theme.modalTrigger, child.props.className),
               }))}
               {isOpen && (
-              <Modal onCancel={this.onCloseModal}>
+              <Modal
+                onCancel={this.onCloseModal}
+                theme={defaultModalTheme}
+              >
                 <div
                   className={theme.dismissButton}
                   onClick={this.onCloseModal}

src/shared/components/ChallengeTile/index.jsx

@@ -56,6 +56,7 @@ export class SearchBarInner extends Component {
     this.getSuggestionList = this.getSuggestionList.bind(this);
     this.handleSearchChange = this.handleSearchChange.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
     // using debounce to avoid processing or requesting too much
     this.updateSuggestionListWithNewSearch = _.debounce(
       this.updateSuggestionListWithNewSearch.bind(this), 400,
@@ -71,6 +72,29 @@ export class SearchBarInner extends Component {
     document.removeEventListener('mousedown', this.handleClickOutside);
   }
 
+  onKeyDown(e) {
+    const { inputlVal, selectedFilter } = this.state;
+    if (inputlVal && e.which === 13) {
+      const searchQuery = {};
+      if (this.searchFieldRef && this.searchFieldRef.value) {
+        if (selectedFilter.name === 'Tags') {
+          searchQuery.tags = [this.searchFieldRef.value];
+        }
+        if (selectedFilter.name === 'All') {
+          searchQuery.phrase = this.searchFieldRef.value;
+        }
+        if (selectedFilter.name === 'Title') {
+          searchQuery.title = this.searchFieldRef.value;
+        }
+      }
+      if (selectedFilter.name !== 'Author') {
+        window.location.href = `${config.TC_EDU_BASE_PATH}${config.TC_EDU_SEARCH_PATH}?${qs.stringify(searchQuery)}`;
+      } else {
+        window.location.href = `${config.TC_EDU_BASE_PATH}${config.TC_EDU_SEARCH_PATH}?author=${inputlVal}`;
+      }
+    }
+  }
+
   /**
    * Set the search field ref
    */
@@ -136,6 +160,7 @@ export class SearchBarInner extends Component {
       isShowSuggestion,
       suggestionList,
       selectedFilter,
+      noResults,
     } = this.state;
 
     const searchQuery = {};
@@ -151,7 +176,8 @@ export class SearchBarInner extends Component {
       }
     }
 
-    return (suggestionList && !_.isEmpty(suggestionList) && isShowSuggestion && (
+    // eslint-disable-next-line no-nested-ternary
+    return suggestionList && !_.isEmpty(suggestionList) && isShowSuggestion ? (
       <div
         className={theme['popup-search-result']}
         ref={this.setPopupSearchResultRef}
@@ -319,7 +345,14 @@ export class SearchBarInner extends Component {
           ) : null
         }
       </div>
-    ));
+    ) : noResults ? (
+      <div
+        className={theme['popup-search-result']}
+        ref={this.setPopupSearchResultRef}
+      >
+        <span>No Results</span>
+      </div>
+    ) : null;
   }
 
   handleClickOutside(e) {
@@ -379,23 +412,26 @@ export class SearchBarInner extends Component {
         .then((results) => {
           // Nothing found?
           if (!results.total) {
-            this.setState({ suggestionList: {} });
+            this.setState({
+              suggestionList: {},
+              noResults: true,
+            });
             return;
           }
           // Author query?
           if (selectedFilter.name === 'Author') {
             const suggestionList = {
               Author: _.map(results.items, item => ({ ...item.fields })),
             };
-            this.setState({ suggestionList });
+            this.setState({ suggestionList, noResults: false });
             return;
           }
           // ALL && Tags
           const suggestionList = this.groupResults(results);
           this.setState({ suggestionList });
         });
     } else {
-      this.setState({ suggestionList: {} });
+      this.setState({ suggestionList: {}, noResults: false });
     }
   }
 
@@ -419,6 +455,7 @@ export class SearchBarInner extends Component {
           contentAuthor: contentAuthor.fields,
           externalArticle: fields.externalArticle,
           contentUrl: fields.contentUrl,
+          slug: fields.slug,
         };
       }),
       'type',
@@ -471,6 +508,7 @@ export class SearchBarInner extends Component {
               document.addEventListener('mousedown', this.handleClickOutside);
             }}
             onChange={this.handleSearchChange}
+            onKeyDown={this.onKeyDown}
           />
           <div className={theme.dropdown}>
             <button

src/shared/components/Contentful/Article/Article.jsx

@@ -156,6 +156,10 @@ $link-color: #0d61bf;
   overflow-y: auto;
   box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.15);
   z-index: 999;
+
+  > span {
+    margin-left: 15px;
+  }
 }
 
 .icon-search {

src/shared/components/Contentful/Modal/index.jsx

@@ -49,7 +49,7 @@
       }
 
       &:first-child {
-        width: 200px;
+        width: 250px;
       }
 
       &:nth-child(2) {

src/shared/components/Contentful/SearchBar/SearchBar.jsx

@@ -137,7 +137,7 @@ export default function GigDetails(props) {
                     </li>
                     <li>
                       <img src={iconLabel2} alt="label 2" />
-                      <div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email.</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
+                      <div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
                     </li>
                     <li>
                       <img src={iconLabel3} alt="label 3" />

src/shared/components/Contentful/SearchBar/themes/default.scss

@@ -142,6 +142,7 @@
 
               img {
                 margin-right: 16px;
+                min-width: 40px;
               }
 
               &:last-child {
@@ -163,6 +164,7 @@
           font-weight: 600;
           font-family: Barlow, sans-serif;
           margin-top: 20px;
+          line-height: 20px;
         }
       }
 
@@ -189,6 +191,7 @@
         .skills {
           display: flex;
           align-items: center;
+          line-height: 21px;
           /* stylelint-disable */
           img {
             margin-right: 8px;