Merge pull request #6601 from topcoder-platform/develop

Release v1.17.13

.circleci/config.yml

@@ -349,14 +349,14 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - develop
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global
           filters:
             branches:
-              only:                
-                - free
+              only:
+                - tco23
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global

__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap

@@ -713,6 +713,7 @@ exports[`renders a full Profile correctly 1`] = `
       "unsubscribe": null,
     }
   }
+  tcAcademyCertifications={Array []}
 />
 `;
 
@@ -862,5 +863,6 @@ exports[`renders an empty Profile correctly 1`] = `
       "unsubscribe": null,
     }
   }
+  tcAcademyCertifications={Array []}
 />
 `;

config/default.js

@@ -444,6 +444,7 @@ module.exports = {
   GIGS_PAGES_PATH: '/gigs',
   GIGS_LISTING_CACHE_TIME: 300, // in seconds
   START_PAGE_PATH: '/start',
+  TC_ACADEMY_BASE_PATH: '/learn',
   GUIKIT: {
     DEBOUNCE_ON_CHANGE_TIME: 150,
   },
@@ -452,4 +453,5 @@ module.exports = {
     SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
   },
   PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
+  PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
 };

config/development.js

@@ -5,4 +5,5 @@ module.exports = {
     USER_SETTINGS: '', /* No dev server is available for saved searches */
   },
   PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
+  PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
 };

config/production.js

@@ -226,4 +226,5 @@ module.exports = {
   TC_EDU_SEARCH_BAR_MAX_RESULTS_EACH_GROUP: 3,
   ENABLE_RECOMMENDER: true,
   PLATFORM_SITE_URL: 'https://platform.topcoder.com',
+  PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder.com',
 };

package.json

@@ -153,7 +153,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.7",
+    "topcoder-react-lib": "1.2.8",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/server/index.js

@@ -138,11 +138,10 @@ async function onExpressJsSetup(server) {
     res.header('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
 
     if (req.url.startsWith('/__community__/veterans') || req.hostname === 'veterans.topcoder.com' || req.url.startsWith('/__community__/tco') || tcoPattern.test(req.hostname)) {
-      res.header('Cache-Control', 'no-cache');
       res.header(
         'Content-Security-Policy',
         "default-src 'self';"
-        + " script-src 'report-sample' 'self'"
+        + " script-src 'report-sample' 'self' 'unsafe-inline' 'unsafe-eval'"
           + ` ${config.CDN.PUBLIC}`
           + ' http://www.google-analytics.com'
           + ' https://www.google-analytics.com'

src/shared/components/ProfilePage/ProfileModal/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PT from 'prop-types';
+import { noop } from 'lodash/noop';
+import { Modal } from 'topcoder-react-ui-kit';
+import cn from 'classnames';
+
+import IconClose from 'assets/images/icon-close-green.svg';
+import styles from './styles.scss';
+
+const ProfileModal = ({
+  children,
+  title,
+  onCancel,
+  containerClassName,
+}) => (
+  <Modal
+    theme={{
+      container: cn(styles['modal-container'], containerClassName),
+      overlay: styles['modal-overlay'],
+    }}
+    onCancel={onCancel}
+  >
+    <React.Fragment>
+      <div styleName="header">
+        <h2 styleName="title">
+          {title}
+        </h2>
+        <div styleName="icon" role="presentation" onClick={onCancel}>
+          <IconClose />
+        </div>
+      </div>
+      {children}
+    </React.Fragment>
+  </Modal>
+);
+
+ProfileModal.defaultProps = {
+  title: null,
+  onCancel: noop,
+  containerClassName: '',
+};
+
+ProfileModal.propTypes = {
+  children: PT.node.isRequired,
+  title: PT.node,
+  onCancel: PT.func,
+  containerClassName: PT.string,
+};
+
+export default ProfileModal;

src/shared/components/ProfilePage/ProfileModal/styles.scss

@@ -0,0 +1,47 @@
+@import "~styles/mixins";
+
+.modal-overlay {
+  background: #000;
+}
+
+.modal-container-copilot,
+.modal-container {
+  width: 1232px;
+  min-height: 700px;
+  max-width: 1232px;
+  border-radius: 8px;
+  padding: 32px 32px 0 32px;
+  gap: 24px;
+
+  &.modal-container-copilot {
+    height: auto;
+  }
+
+  @include xs-to-sm {
+    width: 100%;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100% !important;
+    padding: 24px 16px 48px 16px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 24px;
+
+    .title {
+      @include barlow-medium;
+
+      font-weight: 600;
+      font-size: 22px;
+      line-height: 26px;
+      text-transform: uppercase;
+    }
+
+    .icon {
+      cursor: pointer;
+    }
+  }
+}

src/shared/components/ProfilePage/TcaCertificates/CourseBadge/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import DataScienceBadgeImg from 'assets/images/profile/tca-certificates/datascience-badge.png';
+import DesignBadgeImg from 'assets/images/profile/tca-certificates/design-badge.png';
+import DevelopBadgeImg from 'assets/images/profile/tca-certificates/develop-badge.png';
+import QaBadgeImg from 'assets/images/profile/tca-certificates/qa-badge.png';
+
+import './styles.scss';
+
+const badgesMap = {
+  DATASCIENCE: DataScienceBadgeImg,
+  DESIGN: DesignBadgeImg,
+  DEV: DevelopBadgeImg,
+  QA: QaBadgeImg,
+};
+
+const CourseBadge = ({ type: badgeType, size }) => {
+  const badgeImg = badgesMap[badgeType];
+
+  return (
+    <div styleName={`tca-badge-wrap size-${size}`}>
+      <img src={badgeImg} alt={badgeType} />
+    </div>
+  );
+};
+
+CourseBadge.defaultProps = {
+  size: 'md',
+};
+
+CourseBadge.propTypes = {
+  size: PT.oneOf(['md']),
+  type: PT.oneOf(['DATASCIENCE', 'DESIGN', 'DEV', 'QA']).isRequired,
+};
+
+
+export default CourseBadge;

src/shared/components/ProfilePage/TcaCertificates/CourseBadge/styles.scss

@@ -0,0 +1,13 @@
+.tca-badge-wrap {
+  &.size-md {
+    width: 48px;
+    height: 48px;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

src/shared/components/ProfilePage/TcaCertificates/List/index.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import './styles.scss';
+import CourseBadge from '../CourseBadge';
+
+const preventDefault = ev => ev.stopPropagation();
+
+const List = ({
+  certificates,
+  onClick,
+}) => (
+  <div styleName="list">
+    {certificates.map(certificate => (
+      <div
+        styleName="list-item"
+        key={certificate.id}
+        onClick={() => onClick(certificate)}
+        onKeyPress={() => onClick(certificate)}
+        role="button"
+        tabIndex={-1}
+      >
+        <div styleName="list-item_badge">
+          <CourseBadge type={certificate.certificationTrackType || 'DEV'} />
+        </div>
+        <div>
+          <div styleName="list-item_title">
+            {certificate.certificationTitle}
+          </div>
+          <div styleName="list-item_sub">
+            <a href={`//${certificate.providerUrl}`} target="blank" rel="noopener" onClick={preventDefault}>
+              by {certificate.provider}
+            </a>
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+List.propTypes = {
+  certificates: PT.arrayOf(PT.shape()).isRequired,
+  onClick: PT.func.isRequired,
+};
+
+export default List;

src/shared/components/ProfilePage/TcaCertificates/List/styles.scss

@@ -0,0 +1,63 @@
+@import "~styles/mixins";
+
+.list {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+  flex-wrap: wrap;
+
+  @include xs-to-sm {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    margin-top: 16px;
+  }
+}
+
+.list-item {
+  background: $listing-white;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 316px;
+  transition: 0.25s ease-in-out;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 0 16px rgba(22, 103, 154, 0.5);
+  }
+
+  @include xs-to-sm {
+    width: 100%;
+  }
+}
+
+.list-item_badge {
+  width: 48px;
+  height: 48px;
+
+  svg {
+    display: block;
+    width: 48px;
+    height: 48px;
+  }
+}
+
+.list-item_title {
+  @include roboto-sans-regular;
+
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.list-item_sub {
+  @include roboto-sans-regular;
+
+  font-style: italic;
+  font-size: 14px;
+  line-height: 22px;
+  color: $listing-placeholder-gray;
+}