From 7427588586dc79b838dbe5735b31bb7418797c27 Mon Sep 17 00:00:00 2001 From: tc_user Date: Sat, 1 May 2021 11:45:29 +0800 Subject: [PATCH 1/5] Add banner on Listings Page to introduce MFE --- config/default.js | 1 + config/development.js | 1 + src/assets/images/banner-close.svg | 8 +++ src/assets/images/banner-info.svg | 13 +++++ .../challenge-listing/Banner/index.jsx | 32 ++++++++++ .../challenge-listing/Banner/style.scss | 58 +++++++++++++++++++ .../components/challenge-listing/index.jsx | 3 + 7 files changed, 116 insertions(+) create mode 100644 src/assets/images/banner-close.svg create mode 100644 src/assets/images/banner-info.svg create mode 100644 src/shared/components/challenge-listing/Banner/index.jsx create mode 100644 src/shared/components/challenge-listing/Banner/style.scss diff --git a/config/default.js b/config/default.js index ec258f40b2..e2946ddf77 100644 --- a/config/default.js +++ b/config/default.js @@ -429,4 +429,5 @@ module.exports = { OPTIMIZELY: { SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1', }, + PLATFORM_SITE_URL: 'https://platform.topcoder.com', }; diff --git a/config/development.js b/config/development.js index 709cbaa413..7991e1a4c9 100644 --- a/config/development.js +++ b/config/development.js @@ -4,4 +4,5 @@ module.exports = { URL: { USER_SETTINGS: '', /* No dev server is available for saved searches */ }, + PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com', }; diff --git a/src/assets/images/banner-close.svg b/src/assets/images/banner-close.svg new file mode 100644 index 0000000000..6ea1423dcc --- /dev/null +++ b/src/assets/images/banner-close.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/banner-info.svg b/src/assets/images/banner-info.svg new file mode 100644 index 0000000000..b06a8ac52c --- /dev/null +++ b/src/assets/images/banner-info.svg @@ -0,0 +1,13 @@ + + + ic clock + + + + \ No newline at end of file diff --git a/src/shared/components/challenge-listing/Banner/index.jsx b/src/shared/components/challenge-listing/Banner/index.jsx new file mode 100644 index 0000000000..ad1b697930 --- /dev/null +++ b/src/shared/components/challenge-listing/Banner/index.jsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react'; +import { config } from 'topcoder-react-utils'; + +import BannerCloseIcon from 'assets/images/banner-close.svg'; +import BannerInfoIcon from 'assets/images/banner-info.svg'; +import './style.scss'; + +const Banner = () => { + const [isDisplayed, setIsDisplayed] = useState(true); + + return isDisplayed && ( +
+
+
+ +
+ Click here if you"d like to visit the new BETA Challenge Listings site. +
+ +
setIsDisplayed(false)} + aria-hidden="true" + role="button" + > + +
+
+ ); +}; + +export default Banner; diff --git a/src/shared/components/challenge-listing/Banner/style.scss b/src/shared/components/challenge-listing/Banner/style.scss new file mode 100644 index 0000000000..1abac87dc1 --- /dev/null +++ b/src/shared/components/challenge-listing/Banner/style.scss @@ -0,0 +1,58 @@ +@import "~styles/mixins"; + +.banner { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + margin: 10px 15px 0 15px; + height: 50px; + background: linear-gradient(90deg, #2c95d7 0%, #06d6a0 100%); + + border-radius: 10px; + color: #fff; + @include roboto-medium; + font-size: 16px; + + @include xs-to-sm { + height: 81px; + line-height: 22px; + padding-left: 20px; + } + + .content { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + + .banner-info { + width: 24px; + height: 24px; + margin-left: 20px; + margin-right: 10px; + + @include xs-to-sm { + display: none; + } + } + + @include xs-to-sm { + width: 80%; + } + } + + .banner-close { + width: 14px; + height: 14px; + margin-right: 30px; + + &:hover { + cursor: pointer; + } + + @include xs-to-sm { + margin-bottom: 20px; + } + } +} diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx index 3eacd7ecdc..c05b8ab9fe 100644 --- a/src/shared/components/challenge-listing/index.jsx +++ b/src/shared/components/challenge-listing/index.jsx @@ -18,6 +18,7 @@ import { useMediaQuery } from 'react-responsive'; import NoChallengeCard from './NoChallengeCard'; import Listing from './Listing'; // import ChallengeCardPlaceholder from './placeholders/ChallengeCard'; +import Banner from './Banner'; import './style.scss'; @@ -167,6 +168,8 @@ export default function ChallengeListing(props) { ) } + +
Date: Mon, 3 May 2021 11:26:30 -0300 Subject: [PATCH 2/5] Fix lint error --- .../__snapshots__/index.jsx.snap | 2 ++ .../challenge-listing/Banner/style.scss | 16 ++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap index 351bba4c01..2f06c5df01 100644 --- a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap @@ -8,6 +8,7 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = ` +
@@ -64,6 +65,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = ` +
diff --git a/src/shared/components/challenge-listing/Banner/style.scss b/src/shared/components/challenge-listing/Banner/style.scss index 1abac87dc1..ba9273fa24 100644 --- a/src/shared/components/challenge-listing/Banner/style.scss +++ b/src/shared/components/challenge-listing/Banner/style.scss @@ -1,6 +1,14 @@ @import "~styles/mixins"; .banner { + @include roboto-medium; + + @include xs-to-sm { + height: 81px; + line-height: 22px; + padding-left: 20px; + } + display: flex; justify-content: space-between; flex-direction: row; @@ -8,18 +16,10 @@ margin: 10px 15px 0 15px; height: 50px; background: linear-gradient(90deg, #2c95d7 0%, #06d6a0 100%); - border-radius: 10px; color: #fff; - @include roboto-medium; font-size: 16px; - @include xs-to-sm { - height: 81px; - line-height: 22px; - padding-left: 20px; - } - .content { display: flex; justify-content: space-between; From 5ee5d51cbd81bfe8b8b1a58080de6d93eb76ced1 Mon Sep 17 00:00:00 2001 From: "Luiz R. Rodrigues" Date: Mon, 3 May 2021 11:27:45 -0300 Subject: [PATCH 3/5] ci: deploy nursoltan-s-issue-5490 to Dev and Stag env --- .circleci/config.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index d723a4d47b..ae22dbfa33 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -276,6 +276,7 @@ workflows: branches: only: - develop + - nursoltan-s-issue-5490 # This is alternate dev env for parallel testing - "build-test": context : org-global @@ -304,6 +305,7 @@ workflows: branches: only: - develop + - nursoltan-s-issue-5490 - "approve-smoke-test-on-staging": type: approval requires: From a8f5cf44fbf21e2910e047b5dbfdca86f4f9ae4a Mon Sep 17 00:00:00 2001 From: "Luiz R. Rodrigues" Date: Mon, 3 May 2021 12:57:50 -0300 Subject: [PATCH 4/5] Fix clickable area and typo --- .../challenge-listing/Banner/index.jsx | 18 ++++++++++++++---- .../challenge-listing/Banner/style.scss | 1 + 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/shared/components/challenge-listing/Banner/index.jsx b/src/shared/components/challenge-listing/Banner/index.jsx index ad1b697930..cf1c30fa5e 100644 --- a/src/shared/components/challenge-listing/Banner/index.jsx +++ b/src/shared/components/challenge-listing/Banner/index.jsx @@ -9,23 +9,33 @@ const Banner = () => { const [isDisplayed, setIsDisplayed] = useState(true); return isDisplayed && ( -
+
- Click here if you"d like to visit the new BETA Challenge Listings site. + + Click here if you'd like to visit the new Beta Challenge Listings site +
setIsDisplayed(false)} + onClick={(e) => { + e.preventDefault(); + setIsDisplayed(false); + }} aria-hidden="true" role="button" >
-
+ ); }; diff --git a/src/shared/components/challenge-listing/Banner/style.scss b/src/shared/components/challenge-listing/Banner/style.scss index ba9273fa24..9dc037bb56 100644 --- a/src/shared/components/challenge-listing/Banner/style.scss +++ b/src/shared/components/challenge-listing/Banner/style.scss @@ -25,6 +25,7 @@ justify-content: space-between; flex-direction: row; align-items: center; + color: #fff; .banner-info { width: 24px; From aa6c4c9d5b5aafdd51d3bfb8099b3893ff0c8548 Mon Sep 17 00:00:00 2001 From: "Luiz R. Rodrigues" Date: Mon, 3 May 2021 13:30:36 -0300 Subject: [PATCH 5/5] ci: remove nursoltan-s-issue-5490 from dev and stag --- build.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/build.sh b/build.sh index 56bd78bb06..725701d465 100755 --- a/build.sh +++ b/build.sh @@ -33,6 +33,7 @@ docker build -t $TAG \ --build-arg OPEN_EXCHANGE_RATES_KEY=$OPEN_EXCHANGE_RATES_KEY \ --build-arg SEGMENT_IO_API_KEY=$SEGMENT_IO_API_KEY \ --build-arg CHAMELEON_VERIFICATION_SECRET=$CHAMELEON_VERIFICATION_SECRET \ + --build-arg PLATFORM_SITE_URL=$PLATFORM_SITE_URL \ --build-arg SERVER_API_KEY=$SERVER_API_KEY \ --build-arg TC_M2M_CLIENT_ID=$TC_M2M_CLIENT_ID \ --build-arg TC_M2M_CLIENT_SECRET=$TC_M2M_CLIENT_SECRET \