Production release 2.4.2

.circleci/config.yml

@@ -2,8 +2,11 @@ version: 2
 jobs:
   test:
     docker:
-      - image: circleci/node:8.9.4
+      - image: circleci/node:8.9.4-browsers
     steps:
+      - run:
+          name: checking out qa framework repo
+          command: git clone --branch develop https://$GITUSER:$GITPASSWD@github.com/appirio-tech/qa-framework-js.git ../qa-framework    
       - checkout
       - restore_cache:
           key: test-node-modules-{{ .Environment.CACHE_VERSION }}-{{ checksum "package-lock.json" }}
@@ -18,8 +21,28 @@ jobs:
       - persist_to_workspace:
           root: .
           paths:
-            - dist
-
+            - dist      
+      - run:
+          name: starting server locally
+          command: npm run start
+          background: true
+      - run: sleep 90         
+      - run:
+          name: Running qa frame work
+          command: |
+            cd $HOME/qa-framework
+            sudo chmod 777 /usr/local/lib/node_modules
+            sudo chmod 777 /usr/local/bin
+            echo 127.0.0.1 local.topcoder-dev.com | sudo tee -a /etc/hosts
+            echo 127.0.0.1 local.topcoder.com | sudo tee -a /etc/hosts
+            cat /etc/hosts
+            mv -f test/config/ci-config.js test/config/config.js
+            npm install
+            npm test
+            pwd
+      - store_artifacts:
+          path: /home/circleci/qa-framework/allure-report            
+
   # Just tests commited code.
   deployDev:
     docker:
@@ -56,6 +79,7 @@ jobs:
       - attach_workspace:
           at: ./workspace
       - run: ./deploy.sh DISCOURSE
+
 
 workflows:
   version: 2

config/constants/index.js

@@ -1,10 +1,6 @@
 module.exports = (() => {
   const branch = process.env.CIRCLE_BRANCH || 'dev'
 
-  if(branch === 'master-discourse-free') {
-    return require('./master')
-  }
-
   // for security reason don't let to require any arbitrary file defined in process.env
   if (['master', 'qa'].indexOf(branch) < 0) {
     return require('./dev')

src/components/BtnGroup/BtnGroup.jsx

@@ -24,7 +24,9 @@ class BtnGroup extends React.Component {
           <button
             key={item.value}
             className={cn('tc-btn tc-btn-sm tc-btn-default', { active: item.value === this.state.value })}
-            onClick={() => {
+            onClick={(evt) => {
+              // prevent parent form to be submitted
+              evt.preventDefault()
               if (item.value !== this.state.value) {
                 this.setState({ value: item.value })
                 if (this.props.onChange) {

src/components/BtnGroup/BtnGroup.scss

@@ -6,24 +6,34 @@
     > .tc-btn {
       border-radius: 0;
       border-left-width: 0;
+      margin: 0;
     }
-  
+
     > .tc-btn:first-child {
       border-radius: 2 * $corner-radius 0 0 2 * $corner-radius;
       border-left-width: 1px;
     }
-  
+
     > .tc-btn:last-child {
       border-radius: 0 2 * $corner-radius 2 * $corner-radius 0;
     }
-  
+
     > .tc-btn.active,
     > .tc-btn.active:hover,
     > .tc-btn.active:active {
       background: $tc-gray-20;
       box-shadow: inset 0 1px 3px 0 rgba($tc-gray-80, 0.38);
       cursor: default;
     }
+
+    @media screen and (max-width: $screen-md - 1px) {
+      > .tc-btn,
+      > .tc-btn:first-child,
+      > .tc-btn:last-child {
+        border-radius: 2 * $corner-radius;
+        border-width: 1px;
+        margin: 5px;
+      }
+    }
   }
 }
-

src/components/CoderBot/CoderBot.scss

@@ -13,14 +13,24 @@
     position: relative;
     padding-top: 55px;
     text-align: center;
-    min-height: 606px;
-    min-width: 768px;
-    width: 970px;
+    min-height: 706px;
+    @media screen and (max-width: $screen-sm - 1px) {
+      min-height: 780px;
+    }
     margin: 20px auto 0;
     background: #ffffff;
     .icon-coder-broken {
       margin: 6% 20%;
       float: left;
+      @media screen and (max-width: $screen-md - 1px) {
+        margin: 6% 10%;
+      }
+      @media screen and (max-width: $screen-sm - 1px) {
+        margin: 6% 5%;
+      }
+      @media screen and (max-width: 321px) {
+        margin: 6% 1%;
+      }
     }
     background-size: 307px 300px;
     a{
@@ -36,24 +46,52 @@
       letter-spacing: 0px;
       padding: 0 168px 25px 168px;
       line-height: inherit;
+      @media screen and (max-width: 1000px - 1px) {
+        padding: 0 100px 25px 100px;
+      }
+      @media screen and (max-width: $screen-md - 1px) {
+        padding: 0 28px 25px 28px;
+      }
+      @media screen and (max-width: $screen-sm - 1px) {
+        font-size: 30px;
+      }
     }
     p{
       text-align: left;
+      min-height: 120px;
       padding: 0 168px;
       @include roboto;
       font-size: $tc-label-lg;
       color: $tc-gray-70;
       letter-spacing: 0px;
       line-height: 23px;
+      @media screen and (max-width: 1000px - 1px) {
+        padding: 0 100px;
+      }
+      @media screen and (max-width: $screen-md - 1px) {
+        padding: 0 28px;
+      }
     }
     span{
       position: absolute;
       left: 49%;
-      top: 45%;
+      bottom: 25%;
       @include roboto-medium;
       font-size: 190px;
       color: $tc-orange-30;
       letter-spacing: 0px;
+      @media screen and (max-width: $screen-md - 1px) {
+        font-size: 150px;
+        bottom: 30%;
+      }
+      @media screen and (max-width: $screen-sm - 1px) {
+        font-size: 100px;
+        bottom: 45%;
+      }
+      @media screen and (max-width: 400px) {
+        font-size: 65px;
+        left: 63%;
+      }
     }
   }
 }

src/components/Grid/GridView.scss

@@ -599,7 +599,7 @@
         min-height: 0;
         min-width: 0;
         padding-bottom: 0;
-        padding-right: 9 * $base-unit;
+        padding-right: 0;
       }
 
       .row:not(.header) .flex-item-title.item-customer {

src/components/Maintenance/Maintenance.jsx

@@ -1,10 +1,11 @@
+import React from 'react'
 import './Maintenance.scss'
 
 const Maintenance = () => {
   return (
     <section className="content content-error">
       <div className="container">
-        <div className="page-error">
+        <div className="page-error-maintenance">
           <h3>Welcome to Topcoder Connect</h3>
           <p>We are temporarily down for maintenance. We will be back shortly, after Coder is done with all the amazing optimizations.</p>
         </div>

src/components/Maintenance/Maintenance.scss

@@ -8,15 +8,14 @@
     }
   }
 
-  .page-error {
+  .page-error-maintenance {
     border-radius:4px;
     position: relative;
     padding-top: 55px;
     text-align: center;
     min-height: 606px;
-    min-width: 768px;
-    width: 970px;
     margin: 20px auto 0;
+    background: #ffffff;
     /* background: $tc-white url('../../assets/icons/coder-broken.svg') no-repeat 18% 85%; */
     background-size: 307px 300px;
     a{
@@ -30,17 +29,25 @@
       @include roboto-medium;
       font-size: 48px;
       letter-spacing: 0px;
-      padding: 0 168px 25px 168px;
+      padding: 0 28px 25px 28px;
       line-height: inherit;
+      @media screen and (max-width: $screen-sm - 1px) {
+        font-size: 30px;
+      }
     }
     p{
-      text-align: left;
+      text-align: center;
       padding: 0 168px;
       @include roboto;
       font-size: $tc-label-lg;
       color: $tc-gray-70;
       letter-spacing: 0px;
       line-height: 23px;
+      padding: 0 28px 25px 28px;
+
+      @media screen and (max-width: $screen-md - 1px) {
+        text-align: justify;
+      }
     }
     span{
       position: absolute;

src/components/StatusFilters/StatusFiltersMobile.jsx

@@ -47,7 +47,7 @@ class StatusFiltersMobile extends React.Component {
     return (
       <div>
         <div styleName={cn('handle', { 'is-open': isOpen })} onClick={this.toggle}>
-          <span>{currentSatusLabel}</span>
+          <div>{currentSatusLabel}</div>
           <IconCarretDown />
         </div>
         {isOpen && <ul styleName="list">

src/components/StatusFilters/StatusFiltersMobile.scss

@@ -8,11 +8,11 @@
   display: flex;
   height: 10 * $base-unit;
   font-size: 15px;
-  justify-content: space-between;
   padding: 0 4 * $base-unit;
 
   > svg {
     width: 12px;
+    margin-left: 10px;
   }
 
   &.is-open > svg {

src/config/constants.js

@@ -399,3 +399,11 @@ export const SCREEN_BREAKPOINT_RG = 992
 export const SCREEN_BREAKPOINT_MD = 768
 export const SCREEN_BREAKPOINT_SM = 640
 export const SCREEN_BREAKPOINT_XS = 320
+
+export const NOTIFICATION_SETTINGS_PERIODS = [
+  { text: 'Send as they happen', value: 'immediately' },
+  { text: 'Every 10m.', value: 'every10minutes' },
+  { text: 'Hourly', value: 'hourly' },
+  { text: 'Daily', value: 'daily' },
+  { text: 'Weekly', value: 'weekly' },
+]