fix issue-#1058

Author: mark-nakachon

src/components/ChallengeEditor/ChallengeView/index.js

@@ -21,6 +21,7 @@ import PhaseInput from '../../PhaseInput'
 import LegacyLinks from '../../LegacyLinks'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
+import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
 import Tooltip from '../../Tooltip'
 import { MESSAGE, REVIEW_TYPES } from '../../../config/constants'
@@ -37,9 +38,8 @@ const ChallengeView = ({
   assignedMemberDetails,
   enableEdit,
   onLaunchChallenge,
-  onCloseTask,
-  location }) => {
-  const params = new URLSearchParams(location.search)
+  onCloseTask
+}) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
@@ -188,7 +188,7 @@ const ChallengeView = ({
                     <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
                   </div>
                 </div>
-                {params.get('beta') && (
+                {isBetaMode() && (
                   <div className={styles.row}>
                     <div className={styles.col}>
                       <span>
@@ -283,8 +283,7 @@ ChallengeView.propTypes = {
   assignedMemberDetails: PropTypes.shape(),
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
-  onCloseTask: PropTypes.func,
-  location: PropTypes.object
+  onCloseTask: PropTypes.func
 }
 
 export default withRouter(ChallengeView)

src/components/ChallengeEditor/index.js

@@ -50,6 +50,7 @@ import LegacyLinks from '../LegacyLinks'
 import AssignedMemberField from './AssignedMember-Field'
 import Tooltip from '../Tooltip'
 import { getResourceRoleByName } from '../../util/tc'
+import { isBetaMode } from '../../util/cookie'
 
 const theme = {
   container: styles.modalContainer
@@ -810,8 +811,7 @@ class ChallengeEditor extends Component {
 
   async createNewChallenge () {
     if (!this.props.isNew) return
-    const { metadata, createChallenge, projectDetail, location } = this.props
-    const params = new URLSearchParams(location.search)
+    const { metadata, createChallenge, projectDetail } = this.props
     const { name, trackId, typeId } = this.state.challenge
     const { timelineTemplates } = metadata
     const isDesignChallenge = trackId === DES_TRACK_ID
@@ -840,7 +840,7 @@ class ChallengeEditor extends Component {
       terms: [{ id: DEFAULT_TERM_UUID, roleId: SUBMITTER_ROLE_UUID }]
       // prizeSets: this.getDefaultPrizeSets()
     }
-    if (params.get('beta') === 'true' && projectDetail.terms) {
+    if (isBetaMode() && projectDetail.terms) {
       const currTerms = new Set(newChallenge.terms.map(term => term.id))
       newChallenge.terms.push(
         ...projectDetail.terms
@@ -1126,8 +1126,6 @@ class ChallengeEditor extends Component {
   }
 
   render () {
-    const params = new URLSearchParams(this.props.location.search)
-
     const {
       isLaunch,
       isConfirm,
@@ -1407,7 +1405,7 @@ class ChallengeEditor extends Component {
                 {/* remove terms field and use default term */}
                 {false && (<TermsField terms={metadata.challengeTerms} challenge={challenge} onUpdateMultiSelect={this.onUpdateMultiSelect} />)}
                 <GroupsField onUpdateMultiSelect={this.onUpdateMultiSelect} challenge={challenge} />
-                {params.get('beta') && (
+                {isBetaMode() && (
                   <div className={styles.row}>
                     <div className={styles.col}>
                       <span>
@@ -1548,8 +1546,7 @@ ChallengeEditor.propTypes = {
   replaceResourceInRole: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  loggedInUser: PropTypes.shape().isRequired,
-  location: PropTypes.object
+  loggedInUser: PropTypes.shape().isRequired
 }
 
 export default withRouter(ChallengeEditor)

src/components/Sidebar/Sidebar.module.scss

@@ -25,6 +25,15 @@
   color: $white;
   margin-bottom: 37px;
   padding-left: 30px;
+
+  .beta {
+    font-size: 16px;
+    color: $red;
+    font-weight: bold;
+    position: relative;
+    top: -12px;
+    left: 12px;
+  }
 }
 
 .homeLink {

src/components/Sidebar/index.js

@@ -8,13 +8,18 @@ import cn from 'classnames'
 import TopcoderLogo from '../../assets/images/topcoder-logo.png'
 import styles from './Sidebar.module.scss'
 
+import { isBetaMode } from '../../util/cookie'
+
 const Sidebar = ({
   projectId, resetSidebarActiveParams
 }) => {
   return (
     <div className={styles.sidebar}>
       <img src={TopcoderLogo} className={styles.logo} />
-      <div className={styles.title}>Work Manager</div>
+      <div className={styles.title}>
+        Work Manager
+        {isBetaMode() && <span className={styles.beta}>beta</span>}
+      </div>
       <Link to='/'>
         <div className={cn(styles.homeLink, { [styles.active]: !projectId })} onClick={resetSidebarActiveParams}>
           All Work

src/config/constants.js

@@ -113,6 +113,8 @@ export const SET_FILTER_CHALLENGE_VALUE = 'SET_FILTER_CHALLENGE_VALUE'
 
 export const RESET_SIDEBAR_ACTIVE_PARAMS = 'RESET_SIDEBAR_ACTIVE_PARAMS'
 
+export const BETA_MODE_COOKIE_TAG = 'beta-mode'
+
 // Name of challenge tracks
 export const CHALLENGE_TRACKS = {
   DESIGN: DES_TRACK_ID,

src/routes.js

@@ -5,6 +5,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
 import _ from 'lodash'
+import { BETA_MODE_COOKIE_TAG } from './config/constants'
 import renderApp from './components/App'
 import TopBarContainer from './containers/TopbarContainer'
 import Sidebar from './containers/Sidebar'
@@ -15,6 +16,7 @@ import { saveToken } from './actions/auth'
 import { loadChallengeDetails } from './actions/challenges'
 import { connect } from 'react-redux'
 import { checkAllowedRoles } from './util/tc'
+import { setCookie, removeCookie, isBetaMode } from './util/cookie'
 
 const { ACCOUNTS_APP_LOGIN_URL } = process.env
 
@@ -72,6 +74,19 @@ class Routes extends React.Component {
     })
   }
 
+  componentDidUpdate () {
+    const { search } = this.props.location
+    const params = new URLSearchParams(search)
+    if (!_.isEmpty(params.get('beta'))) {
+      if (params.get('beta') === 'true' && !isBetaMode()) {
+        setCookie(BETA_MODE_COOKIE_TAG, 'true')
+      } else if (params.get('beta') === 'false' && isBetaMode()) {
+        removeCookie(BETA_MODE_COOKIE_TAG)
+      }
+      this.props.history.push(this.props.location.pathname)
+    }
+  }
+
   render () {
     if (!this.props.isLoggedIn) {
       return null
@@ -143,7 +158,8 @@ Routes.propTypes = {
   saveToken: PropTypes.func,
   location: PropTypes.object,
   isLoggedIn: PropTypes.bool,
-  token: PropTypes.string
+  token: PropTypes.string,
+  history: PropTypes.object
 }
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Routes))

src/util/cookie.js

@@ -0,0 +1,34 @@
+/**
+ * Provides Cookie related utility methods
+ */
+
+import { BETA_MODE_COOKIE_TAG } from '../config/constants'
+
+/**
+  * A function that get's a cookie
+ */
+export function getCookie (name) {
+  const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)')
+  return v ? v[2] : undefined
+}
+
+/**
+ * A function that set's a cookie
+ */
+export function setCookie (name, value) {
+  document.cookie = `${name}=${value}`
+}
+
+/**
+ * A function that removes Cookie by setting expiry date to past
+ */
+export function removeCookie (name) {
+  document.cookie = `${name}=; expires=Thu, 18 Dec 2013 12:00:00 UTC;`
+}
+
+/**
+ * A function that checks whether beta mode is enabled or not
+ */
+export function isBetaMode () {
+  return getCookie(BETA_MODE_COOKIE_TAG)
+}