Merge pull request #6588 from topcoder-platform/develop

luizrrodrigues · web-flow · commit 4231948b997e · 2022-07-20T01:46:17.000-03:00
Release v1.17.9
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -349,6 +349,7 @@ workflows:
           filters:
             branches:
               only:
+                - develop
                 - reskin-profile
       # This is alternate dev env for parallel testing
       - "build-test":
@@ -377,7 +378,6 @@ workflows:
           filters: &filters-staging
             branches:
               only:
-                - develop
                 - fix-security-headers
                 - tco23-BS-comps
       # Production builds are exectuted
diff --git a/__tests__/shared/components/SubmissionManagement/__snapshots__/Submission.jsx.snap b/__tests__/shared/components/SubmissionManagement/__snapshots__/Submission.jsx.snap
@@ -12,6 +12,9 @@ exports[`Snapshot match 1`] = `
     >
       ID
     </span>
+    <div
+      className="src-shared-components-SubmissionManagement-Submission-___styles__v5-id___1W9Db"
+    />
   </td>
   <td
     className="src-shared-components-SubmissionManagement-Submission-___styles__type-col___25OJ8"
@@ -70,7 +73,11 @@ exports[`Snapshot match 2`] = `
     >
       ID
     </span>
-    12345
+    <div
+      className="src-shared-components-SubmissionManagement-Submission-___styles__v5-id___1W9Db"
+    >
+      12345
+    </div>
   </td>
   <td
     className="src-shared-components-SubmissionManagement-Submission-___styles__type-col___25OJ8"
diff --git a/__tests__/shared/components/challenge-listing/Filters/FiltersPanel.jsx b/__tests__/shared/components/challenge-listing/Filters/FiltersPanel.jsx
@@ -30,6 +30,7 @@ const mockDatas = [{
   selectedCommunityId: '1',
   setFilterState,
   setSearchText,
+  activeBucket: 'all',
   validKeywords: ['key', 'word'],
   validTypes: [{ name: 'sub', subTrack: 'sub' }, { name: 'track', subTrack: 'track' }],
   onClose,
@@ -47,6 +48,7 @@ const mockDatas = [{
   filterState: {
     groups: [],
   },
+  activeBucket: 'openForRegistration',
   hidden: false,
   onSaveFilter,
   selectCommunity,
diff --git a/__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap b/__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap
@@ -62,6 +62,7 @@ exports[`Matches shallow shapshot 2`] = `
         className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__bucket-selector-mobile___JbE2n"
       >
         <BucketSelector
+          activeBucket="openForRegistration"
           disabled={false}
           expanding={false}
           isAuth={false}
@@ -209,7 +210,79 @@ exports[`Matches shallow shapshot 2`] = `
     <hr
       className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hr___1WvP7"
     />
+    <React.Fragment>
+      <div
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row___2Vfd_ src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tco-challenges-filter___3XG63"
+      >
+        <span
+          aria-checked={false}
+          aria-label="Tco eligible challenge toggle button pressed Off"
+          className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tco-select-label___3ATak"
+          role="switch"
+        >
+          <ThemedSwitchWithLabel
+            composeAdhocTheme="deeply"
+            composeContextTheme="softly"
+            enabled={false}
+            labelAfter="TCO Eligible Challenges"
+            labelBefore=""
+            mapThemrProps={[Function]}
+            onSwitch={[Function]}
+            themePriority="adhoc-context-default"
+          />
+        </span>
+        <div
+          className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tco-challenge-tooltip___17i7n"
+        >
+          <Tooltip
+            align={Object {}}
+            className=""
+            content={
+              <div
+                className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__tctooltiptext___2Lyji"
+              >
+                <p>
+                  Earn TCO points by participating in these 
+                  <br />
+                  challenges. 
+                  <a
+                    href="https://www.topcoder-dev.com/community/member-programs/topcoder-open"
+                    rel="noreferrer noopener"
+                    target="_blank"
+                  >
+                    Learn more about TCO
+                  </a>
+                </p>
+              </div>
+            }
+            defaultVisible={false}
+            id="tco-tip"
+            onTooltipHover={[Function]}
+            placeArrow={[Function]}
+            position="top"
+            suppressDiv={false}
+            trigger={
+              Array [
+                "hover",
+                "focus",
+              ]
+            }
+          >
+            <CircleIcon
+              fill="none"
+              height="14"
+              viewBox="0 0 14 14"
+              width="14"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </React.Fragment>
   </div>
+  <hr
+    className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hr___1WvP7"
+  />
   <div
     className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__buttons___2r3xW"
   >
diff --git a/config/default.js b/config/default.js
@@ -103,7 +103,7 @@ module.exports = {
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder-dev.com',
     CHALLENGES_URL: 'https://www.topcoder-dev.com/challenges',
-
+    TCO_OPEN_URL: 'https://www.topcoder-dev.com/community/member-programs/topcoder-open',
     ARENA: 'https://arena.topcoder-dev.com',
     AUTH: 'https://accounts-auth0.topcoder-dev.com',
     BASE: 'https://www.topcoder-dev.com',
diff --git a/config/production.js b/config/production.js
@@ -26,6 +26,7 @@ module.exports = {
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder.com',
     CHALLENGES_URL: 'https://www.topcoder.com/challenges',
+    TCO_OPEN_URL: 'https://www.topcoder.com/community/member-programs/topcoder-open',
 
     AUTH: 'https://accounts-auth0.topcoder.com',
     BASE: 'https://www.topcoder.com',
diff --git a/src/shared/components/SubmissionManagement/Submission/index.jsx b/src/shared/components/SubmissionManagement/Submission/index.jsx
@@ -45,8 +45,8 @@ export default function Submission(props) {
     <tr styleName="submission-row">
       <td styleName="id-col">
         <span styleName="mobile-header">ID</span>
-        {submissionObject.id}
-        {/* <div styleName="legacy-id">{submissionObject.legacySubmissionId}</div> */}
+        {submissionObject.legacySubmissionId}
+        <div styleName="v5-id">{submissionObject.id}</div>
       </td>
       <td styleName="type-col">
         <span styleName="mobile-header">TYPE</span>
diff --git a/src/shared/components/SubmissionManagement/Submission/styles.scss b/src/shared/components/SubmissionManagement/Submission/styles.scss
@@ -17,7 +17,7 @@ $submission-space-50: $base-unit * 10;
   }
 
   td {
-    vertical-align: middle;
+    // vertical-align: middle;
     padding: 16px;
     background: $tc-white;
     border-top: 1px solid $tc-gray-10;
@@ -115,8 +115,9 @@ $submission-space-50: $base-unit * 10;
     }
   }
 
-  .legacy-id {
-    color: $tc-gray-50;
+  .v5-id {
+    font-weight: 400;
+    line-height: 22px;
   }
 
   .status-col {
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
@@ -257,7 +257,9 @@ export default function FiltersPanel({
   const disableClearFilterButtons = isFilterEmpty(filterState, past ? 'past' : '', activeBucket);
 
   const isRecommendedChallengesVisible = (activeBucket === 'openForRegistration' && config.ENABLE_RECOMMENDER);
+  const isTcoChallengesVisible = activeBucket !== BUCKETS.REVIEW_OPPORTUNITIES;
   const [recommendedToggle, setRecommendedToggle] = useState(false);
+  const [tcoToggle, setTcoToggle] = useState(false);
 
   useEffect(() => {
     if (!isFilterEmpty(filterState, past ? 'past' : '', activeBucket)
@@ -270,11 +272,19 @@ export default function FiltersPanel({
       });
     }
 
+    if (filterState.tco) {
+      setTcoToggle(true);
+    }
     if (filterState.recommended) {
       setRecommendedToggle(true);
     }
   }, [filterState]);
 
+  const onSwitchTcoChallenge = (on) => {
+    setFilterState({ ..._.clone(filterState), tco: on ? on.toString() : on });
+    setTcoToggle(on);
+  };
+
   const onSwitchRecommendedChallenge = (on) => {
     setFilterState({ ..._.clone(filterState), recommended: on });
     selectBucket(BUCKETS.OPEN_FOR_REGISTRATION);
@@ -314,6 +324,14 @@ export default function FiltersPanel({
     </div>
   );
 
+  const tcoCheckboxTip = (
+    <div styleName="tctooltiptext">
+      <p>Earn TCO points by participating in these <br />
+        challenges. <a href={config.URL.TCO_OPEN_URL} target="_blank" rel="noreferrer noopener">Learn more about TCO</a>
+      </p>
+    </div>
+  );
+
   return (
     <div styleName="FiltersPanel">
       <div styleName="header">
@@ -648,10 +666,42 @@ export default function FiltersPanel({
             </React.Fragment>
           )
         }
+        {isTcoChallengesVisible
+            && (
+            <React.Fragment>
+              <div styleName="filter-row tco-challenges-filter">
+                <span
+                  styleName="tco-select-label"
+                  aria-label={`Tco eligible challenge toggle button pressed ${tcoToggle ? 'On' : 'Off'}`}
+                  role="switch"
+                  aria-checked={tcoToggle}
+                >
+                  <SwitchWithLabel
+                    enabled={tcoToggle}
+                    labelAfter="TCO Eligible Challenges"
+                    onSwitch={onSwitchTcoChallenge}
+                  />
+                </span>
+
+                <div styleName="tco-challenge-tooltip">
+                  <Tooltip
+                    id="tco-tip"
+                    content={tcoCheckboxTip}
+                    className={style['tooltip-overlay']}
+                    trigger={['hover', 'focus']}
+                  >
+                    <CircleIcon />
+                  </Tooltip>
+                </div>
+              </div>
+            </React.Fragment>
+            )
+        }
+
       </div>
 
       {
-        isRecommendedChallengesVisible && _.get(auth, 'user.userId')
+        ((isRecommendedChallengesVisible && _.get(auth, 'user.userId')) || isTcoChallengesVisible)
           && (<hr styleName="hr" />)
       }
 
@@ -661,6 +711,7 @@ export default function FiltersPanel({
           disabled={disableClearFilterButtons}
           onClick={() => {
             setRecommendedToggle(false);
+            setTcoToggle(false);
             setSort('openForRegistration', 'startDate');
             setFilterState({
               tracks: {
@@ -670,6 +721,7 @@ export default function FiltersPanel({
                 QA: true,
               },
               search: '',
+              tco: false,
               tags: [],
               types: ['CH', 'F2F', 'TSK'],
               groups: [],
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
@@ -118,7 +118,8 @@ hr.hr {
   .filter-row {
     display: flex;
 
-    .recommended-select-label {
+    .recommended-select-label,
+    .tco-select-label {
       width: 45%;
       margin-bottom: 16px;
       display: flex;
@@ -606,7 +607,8 @@ hr.hr {
     }
   }
 
-  .recommended-challenges-filter {
+  .recommended-challenges-filter,
+  .tco-challenges-filter {
     display: flex;
     margin: 0;
     position: relative;
@@ -619,7 +621,8 @@ hr.hr {
       flex-direction: row;
     }
 
-    .recommended-challenge-tooltip {
+    .recommended-challenge-tooltip,
+    .tco-challenge-tooltip {
       position: absolute;
       left: 210px;
       display: flex;
@@ -639,6 +642,10 @@ hr.hr {
   color: $tc-white;
   border-radius: 8px;
   padding: 10px;
+
+  a {
+    font-weight: bold;
+  }
 }
 
 .tctooltiptext::after {
diff --git a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx
@@ -137,7 +137,7 @@ export default function Bucket({
             title={BUCKET_DATA[bucket].name}
           />
           <h1 styleName="no-results">
-            {(filterState.recommended && activeBucket === 'openForRegistration') ? null : `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`}
+            {`${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`}
           </h1>
         </div>
       </div>
diff --git a/src/shared/reducers/challenge-listing/index.js b/src/shared/reducers/challenge-listing/index.js
@@ -422,7 +422,7 @@ function onSetFilter(state, { payload }) {
    * do it very carefuly (many params are not validated). */
   const filter = _.pickBy(_.pick(
     payload,
-    ['tags', 'types', 'search', 'startDateEnd', 'endDateStart', 'groups', 'events', 'tracks'],
+    ['tags', 'types', 'search', 'startDateEnd', 'endDateStart', 'groups', 'events', 'tracks', 'tco'],
   ), value => (!_.isArray(value) && value && value !== '') || (_.isArray(value) && value.length > 0));
 
   const emptyArrayAllowedFields = ['types'];
diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js
@@ -190,6 +190,7 @@ export function filterChanged(filter, prevFilter) {
   }
   return (!_.isEqual(filter.tracks, prevFilter.tracks))
   || (filter.search !== prevFilter.search)
+  || (filter.tco !== prevFilter.tco)
   || (filter.startDateEnd !== prevFilter.startDateEnd)
   || (filter.endDateStart !== prevFilter.endDateStart)
   // eslint-disable-next-line max-len
@@ -216,8 +217,13 @@ export function isFilterEmpty(filter, tab, bucket) {
   let f;
   let empty;
 
+  if (!filter.tco) {
+    // eslint-disable-next-line no-param-reassign
+    delete filter.tco;
+  }
+
   if (tab === 'past') {
-    f = _.pick(filter, 'tracks', 'search', 'types', 'startDateEnd', 'endDateStart');
+    f = _.pick(filter, 'tracks', 'search', 'types', 'startDateEnd', 'endDateStart', 'tco');
     if (f.types) f.types = [...f.types].sort();
     empty = {
       tracks: {
@@ -244,7 +250,7 @@ export function isFilterEmpty(filter, tab, bucket) {
       reviewOpportunityTypes: _.keys(REVIEW_OPPORTUNITY_TYPES),
     };
   } else {
-    f = _.pick(filter, 'tracks', 'search', 'types');
+    f = _.pick(filter, 'tracks', 'search', 'types', 'tco');
     if (f.types) f.types = [...f.types].sort();
     empty = {
       tracks: {

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ $submission-space-50: $base-unit * 10;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`td {`
`20`		`- vertical-align: middle;`
	`20`	`+ // vertical-align: middle;`
`21`	`21`	`padding: 16px;`
`22`	`22`	`background: $tc-white;`
`23`	`23`	`border-top: 1px solid $tc-gray-10;`
`@@ -115,8 +115,9 @@ $submission-space-50: $base-unit * 10;`
`115`	`115`	`}`
`116`	`116`	`}`
`117`	`117`
`118`		`- .legacy-id {`
`119`		`- color: $tc-gray-50;`
	`118`	`+ .v5-id {`
	`119`	`+ font-weight: 400;`
	`120`	`+ line-height: 22px;`
`120`	`121`	`}`
`121`	`122`
`122`	`123`	`.status-col {`