topcoder-platform · vikasrohit · Jul 12, 2021 · Jul 1, 2021 · Jul 2, 2021 · Jul 2, 2021
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -81,7 +81,7 @@ workflows:
           context : org-global
           filters:
             branches:
-              only: ['develop', 'feature/bug-bash-jun']
+              only: ['develop', 'feature/bug-bash-july']
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

diff --git a/src/components/ChallengeEditor/ChallengeEditor.module.scss b/src/components/ChallengeEditor/ChallengeEditor.module.scss
@@ -15,20 +15,33 @@
   }
 }
 
-.title {
-  @include roboto-bold();
+.textCenter {
+  text-align: center;
+}
+
+.topContainer {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
 
+.leftContainer {
+  display: flex;
+  align-items: center;
+  .title {
+    text-align: left;
+  }
+}
+
+.title {
   font-size: 24px;
   font-weight: 700;
   line-height: 29px;
+  margin-right: 5px;
   color: $challenges-title;
-  margin-top: 30px;
   text-align: center;
-
-  span {
-    color: $tc-red;
-  }
-
 }
 
 .textRequired {
@@ -255,7 +268,6 @@
 }
 
 .actionButtons {
-  position: absolute;
   top: 30px;
   a,button {
     height: 40px;

diff --git a/src/components/ChallengeEditor/ChallengeViewTabs/ChallengeViewTabs.module.scss b/src/components/ChallengeEditor/ChallengeViewTabs/ChallengeViewTabs.module.scss
@@ -3,11 +3,32 @@
 $tc-dark-blue: #0681ff;
 $tc-white: #FFFFFF;
 
+.topContainer {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.leftContainer {
+  display: flex;
+  align-items: center;
+}
+.title {
+  @include roboto-bold();
+
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 29px;
+  margin-right: 5px;
+  color: $challenges-title;
+  text-align: left;
+}
+
 .actionButtons {
   display: flex;
-  position: absolute;
   top: 30px;
-  margin-top: 53px;
 }
 
 .actionButtonsLeft {
@@ -38,21 +59,6 @@ $tc-white: #FFFFFF;
   }
 }
 
-.title {
-  @include roboto-bold();
-
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 29px;
-  color: $challenges-title;
-  margin-top: 25px;
-  text-align: center;
-
-  span {
-    color: $tc-red;
-  }
-}
-
 .challenge-view-selector {
   display: flex;
   flex-wrap: wrap;

diff --git a/src/components/ChallengeEditor/ChallengeViewTabs/index.js b/src/components/ChallengeEditor/ChallengeViewTabs/index.js
@@ -81,60 +81,64 @@ const ChallengeViewTabs = ({
   return (
     <div className={styles.list}>
       <Helmet title='View Details' />
-      {!isTask && (
+      <div className={styles.topContainer}>
+        <div className={styles.leftContainer}>
+          <div className={styles.title}>{challenge.name}</div>
+          {!isTask && (
+            <div
+              className={cn(
+                styles.actionButtons,
+                styles.button,
+                styles.actionButtonsLeft
+              )}
+            >
+              <LegacyLinks challenge={challenge} challengeView />
+            </div>
+          )}
+        </div>
         <div
           className={cn(
             styles.actionButtons,
             styles.button,
-            styles.actionButtonsLeft
+            styles.actionButtonsRight
           )}
         >
-          <LegacyLinks challenge={challenge} challengeView />
+          {(challenge.status === 'Draft' || challenge.status === 'New') && <div className={styles['cancel-button']}><CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} /></div>}
+          {challenge.status === 'Draft' && (
+            <div className={styles.button}>
+              {challenge.legacyId || isTask ? (
+                <PrimaryButton
+                  text={'Launch'}
+                  type={'info'}
+                  onClick={onLaunchChallenge}
+                />
+              ) : (
+                <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
+                  {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
+                  <PrimaryButton text={'Launch'} type={'disabled'} />
+                </Tooltip>
+              )}
+            </div>
+          )}
+          {isTask && challenge.status === 'Active' && (
+            <div className={styles.button}>
+              {assignedMemberDetails ? (
+                <Tooltip content={MESSAGE.MARK_COMPLETE}>
+                  <PrimaryButton text={'Mark Complete'} type={'success'} onClick={onCloseTask} />
+                </Tooltip>
+              ) : (
+                <Tooltip content={MESSAGE.NO_TASK_ASSIGNEE}>
+                  {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
+                  <PrimaryButton text={'Mark Complete'} type={'disabled'} />
+                </Tooltip>
+              )}
+            </div>
+          )}
+          {enableEdit && (
+            <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} />
+          )}
+          <PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
         </div>
-      )}
-      <div className={styles.title}>{challenge.name}</div>
-      <div
-        className={cn(
-          styles.actionButtons,
-          styles.button,
-          styles.actionButtonsRight
-        )}
-      >
-        {(challenge.status === 'Draft' || challenge.status === 'New') && <div className={styles['cancel-button']}><CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} /></div>}
-        {challenge.status === 'Draft' && (
-          <div className={styles.button}>
-            {challenge.legacyId || isTask ? (
-              <PrimaryButton
-                text={'Launch'}
-                type={'info'}
-                onClick={onLaunchChallenge}
-              />
-            ) : (
-              <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
-                {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
-                <PrimaryButton text={'Launch'} type={'disabled'} />
-              </Tooltip>
-            )}
-          </div>
-        )}
-        {isTask && challenge.status === 'Active' && (
-          <div className={styles.button}>
-            {assignedMemberDetails ? (
-              <Tooltip content={MESSAGE.MARK_COMPLETE}>
-                <PrimaryButton text={'Mark Complete'} type={'success'} onClick={onCloseTask} />
-              </Tooltip>
-            ) : (
-              <Tooltip content={MESSAGE.NO_TASK_ASSIGNEE}>
-                {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
-                <PrimaryButton text={'Mark Complete'} type={'disabled'} />
-              </Tooltip>
-            )}
-          </div>
-        )}
-        {enableEdit && (
-          <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} />
-        )}
-        <PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
       </div>
       <div className={styles['challenge-view-selector']}>
         <a

diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
@@ -59,12 +59,12 @@ const theme = {
   container: styles.modalContainer
 }
 
-const getTitle = (isNew) => {
+const getTitle = (isNew, challenge) => {
   if (isNew) {
     return 'Create New Work'
   }
 
-  return 'Set-Up Work'
+  return challenge.name || 'Set-Up Work'
 }
 
 class ChallengeEditor extends Component {
@@ -1321,7 +1321,7 @@ class ChallengeEditor extends Component {
           <ConfirmationModal
             title='Complete Task Confirmation'
             message={
-              <p>
+              <p className={styles.textCenter}>
                 Are you sure want to complete task <strong>"{challenge.name}"</strong> with the prize <strong>${taskPrize}</strong> for <strong>{assignedMember}</strong>?
               </p>
             }
@@ -1600,14 +1600,16 @@ class ChallengeEditor extends Component {
 
     return (
       <div className={styles.wrapper}>
-        <Helmet title={getTitle(isNew)} />
-        <div className={cn(styles.actionButtons, styles.actionButtonsLeft)}>
-          {!isNew && <LegacyLinks challenge={challenge} />}
-        </div>
-        <div className={styles.title}>{getTitle(isNew)}</div>
-        <div className={cn(styles.actionButtons, styles.actionButtonsRight)}>
-          {!isNew && this.props.challengeDetails.status === 'New' && <PrimaryButton text={'Delete'} type={'danger'} onClick={this.deleteModalLaunch} />}
-          <PrimaryButton text={'Back'} type={'info'} submit link={`/projects/${projectDetail.id}/challenges`} />
+        <Helmet title={getTitle(isNew, challenge)} />
+        <div className={styles.topContainer}>
+          <div className={styles.leftContainer}>
+            <div className={styles.title}>{getTitle(isNew, challenge)}</div>
+            {!isNew && <LegacyLinks challenge={challenge} />}
+          </div>
+          <div className={cn(styles.actionButtons, styles.actionButtonsRight)}>
+            {!isNew && this.props.challengeDetails.status === 'New' && <PrimaryButton text={'Delete'} type={'danger'} onClick={this.deleteModalLaunch} />}
+            <PrimaryButton text={'Back'} type={'info'} submit link={`/projects/${projectDetail.id}/challenges`} />
+          </div>
         </div>
         <div className={styles.textRequired}>* Required</div>
         <div className={styles.container}>

diff --git a/src/components/ChallengesComponent/ChallengeList/index.js b/src/components/ChallengesComponent/ChallengeList/index.js
@@ -121,6 +121,9 @@ class ChallengeList extends Component {
       case CHALLENGE_STATUS.COMPLETED:
         selectedTab = 3
         break
+      case CHALLENGE_STATUS.CANCELLED:
+        selectedTab = 4
+        break
     }
 
     let warningModal = null
@@ -175,13 +178,18 @@ class ChallengeList extends Component {
                 this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.COMPLETED)
                 break
               }
+              case 4: {
+                this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.CANCELLED)
+                break
+              }
             }
           }}>
           <TabList>
             <Tab>Active</Tab>
             <Tab>New</Tab>
             <Tab>Draft</Tab>
             <Tab>Completed</Tab>
+            <Tab>Cancelled</Tab>
           </TabList>
           <TabPanel />
           <TabPanel />

diff --git a/src/components/ChallengesComponent/ChallengesComponent.module.scss b/src/components/ChallengesComponent/ChallengesComponent.module.scss
@@ -11,6 +11,7 @@
 
   font-size: 24px;
   font-weight: 700;
+  margin-right: 5px;
   line-height: 29px;
   color: $challenges-title;
   text-align: center;
@@ -22,12 +23,17 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
+
 }
 
 .titleLinks {
   align-items: center;
   display: flex;
 
+  > span a {
+    margin: 2px 5px 0;
+  }
+
   > a + a {
     margin-left: 20px;
   }

diff --git a/src/components/LegacyLinks/LegacyLinks.module.scss b/src/components/LegacyLinks/LegacyLinks.module.scss
@@ -1,18 +1,11 @@
 @import "../../styles/includes";
 .container {
   display: flex;
-  margin-top: auto;
   align-items: center;
+  white-space: nowrap;
 
-  button:not(:first-child),
-  a:not(:first-child) {
-    margin-left: 20px;
-  }
-
-  button {
-    height: 40px;
-    outline: none;
-    white-space: nowrap;
+  > a {
+    margin: 0 5px;
   }
 
   .row {