Merge pull request #5589 from topcoder-platform/develop

Release v1.9.9

Author: luizrrodrigues

__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap

@@ -38,6 +38,8 @@ exports[`Default render 1`] = `
     isRTL={false}
     keepFocusOnInput={false}
     keepOpenOnDateSelect={false}
+    maxDate={null}
+    minDate={null}
     monthFormat="MMMM YYYY"
     navNext={
       <IconNext

automated-smoke-test/conf.ts

@@ -41,8 +41,8 @@ exports.config = {
     // '../temp/test-suites/tc-header.spec.js',
     // '../temp/test-suites/tc-footer.spec.js',
     // '../temp/test-suites/tc-preferences.spec.js',
-     '../temp/test-suites/tc-challenge-listing.spec.js',
-    // '../temp/test-suites/tc-challenge-detail.spec.js',
+    '../temp/test-suites/tc-challenge-listing.spec.js',
+    '../temp/test-suites/tc-challenge-detail.spec.js',
     // '../temp/test-suites/tc-my-dashboard.spec.js',
     // '../temp/test-suites/tc-member-profile.spec.js',
   ],

src/assets/images/profile/skills/id-604.svg

@@ -0,0 +1,20 @@
+{
+  "challengeFilter": {
+    "events": ["tco22"]
+  },
+  "communityId": "tco22",
+  "communityName": "TCO22",
+  "groupIds": [],
+  "hideSearch": true,
+  "logos": [{
+    "img": "/community-app-assets/themes/tco/TCO22.svg",
+    "url": "https://tco22.topcoder.com"
+  }],
+  "menuItems": [{
+    "navigationMenu": "5zZw57ZcKXWfOwwWbk5VnL"
+  }],
+  "newsFeed": "http://www.topcoder.com/feed",
+  "subdomains": ["tco22"],
+  "description": "2022 Topcoder Open. The Ultimate Programming & Design Tournament",
+  "image": "tco22.jpg"
+}

src/server/tc-communities/tco22/metadata.json

@@ -250,7 +250,7 @@ class ArticleCard extends React.Component {
                       {
                         showArticleInfo() && (
                           <p className={theme.readTimeInfo}>
-                            {themeName === 'Article large' ? <span>&nbsp;.&nbsp;</span> : null}
+                            {themeName === 'Article large' && contentAuthor && contentAuthor.length > 0 ? <span>&nbsp;.&nbsp;</span> : null}
                             {
                               contentAuthor && contentAuthor.length > 0 ? (
                                 <Link

src/shared/components/Contentful/ArticleCard/ArticleCard.jsx

@@ -5,9 +5,8 @@ import moment from 'moment';
 import PT from 'prop-types';
 import React from 'react';
 import { themr } from 'react-css-super-themr';
-import DatePicker from 'components/challenge-listing/Filters/DatePicker';
+import Datepicker from 'components/GUIKit/Datepicker';
 import CalendarWeek from 'react-dates/lib/components/CalendarWeek';
-import IconCalendar from 'assets/images/tc-edu/icon-calendar.svg';
 import defaultTheme from './themes/default.scss';
 
 // eslint-disable-next-line no-unused-expressions, react/forbid-foreign-prop-types
@@ -25,22 +24,29 @@ export function FilterDateInner(props) {
 
   return (
     <div className={`${theme.container} ${className}`}>
-      <span className={theme.title}>From</span>
-      <IconCalendar />
-      <DatePicker
-        displayFormat="MMM D, YYYY"
-        date={startDate}
-        numberOfMonths={1}
-        id="date-picker-start-date"
-        onDateChange={(date) => { onSelectStartDate(date); }}
+      <Datepicker
+        label="Date Start"
+        value={startDate}
+        onChange={(date) => {
+          if (date instanceof Date) onSelectStartDate(moment(date));
+        }}
+        size="xs"
+        isOutsideRange={day => moment().isBefore(day)}
+        displayFormat="M/DD/YYYY"
+        hideCustomInputIcon
+        errorMsg={startDate > endDate ? 'From should be before end' : null}
       />
-      <span className={theme.separator}>-</span>
-      <DatePicker
-        displayFormat="MMM D, YYYY"
-        date={endDate}
-        numberOfMonths={1}
-        id="date-picker-end-date"
-        onDateChange={(date) => { onSelectEndDate(date); }}
+      <div className={theme.separator} />
+      <Datepicker
+        label="Date End"
+        value={endDate}
+        onChange={(date) => {
+          if (date instanceof Date) onSelectEndDate(moment(date));
+        }}
+        size="xs"
+        isOutsideRange={day => moment().isSameOrBefore(day)}
+        displayFormat="M/DD/YYYY"
+        hideCustomInputIcon
       />
     </div>
   );

src/shared/components/Contentful/SearchPageFilter/FilterDate/index.jsx

@@ -2,58 +2,20 @@
 
 $text-black: #2a2a2a;
 
-@mixin ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
 .container {
   @include roboto-regular;
 
   display: flex;
   flex-direction: row;
   color: $text-black;
-  background-color: $tc-white;
-  border-radius: 6px;
-  border: 1px solid #aaa;
   position: relative;
-  width: 100%;
-  align-items: center;
-  padding-left: 10px;
   font-size: 14px;
-  height: 38px;
-  max-width: 235px;
-
-  :global {
-    .SingleDatePicker {
-      width: 90px;
-      margin-left: 6px;
-    }
-
-    input {
-      height: 21px !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      font-size: 14px !important;
-      border: none !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-.title {
-  position: absolute;
-  color: #aaa;
-  font-size: 12px;
-  background: $tc-white;
-  padding: 0 7px;
-  left: 8px;
-  top: -7px;
 }
 
 .separator {
-  margin-left: 3px;
-  margin-right: 3px;
+  margin: 0 6px;
+  width: 6px;
+  height: 1px;
+  background-color: $text-black;
+  margin-top: 20px;
 }

src/shared/components/Contentful/SearchPageFilter/FilterDate/themes/default.scss

@@ -201,7 +201,7 @@ SearchPageFilterInner.defaultProps = {
   onApply: () => { },
   selectedAuthor: DEF_SELECTED_AUTHOR,
   authorList: [DEF_SELECTED_AUTHOR],
-  startDate: moment('2001-01-02'),
+  startDate: moment('2001-01-01'),
   endDate: moment(),
   tags: [],
   selectedCategory: '',

src/shared/components/Contentful/SearchPageFilter/SearchPageFilter.jsx

@@ -30,7 +30,7 @@ $green-color: #137d60;
 }
 
 .track-date-container {
-  margin-top: 27px;
+  margin-top: 43px;
 }
 
 .author-container {

src/shared/components/Contentful/SearchPageFilter/themes/default.scss

@@ -24,15 +24,15 @@ export function TracksDateInner(props) {
       <Datepicker
         label="Date Start"
         value={startDate}
-        onChange={(date) => { onSelectStartDate(date); }}
+        onChange={(date) => { if (date instanceof Date) onSelectStartDate(date); }}
         size="xs"
         isOutsideRange={day => moment().isSameOrBefore(day)}
       />
       <div className={theme.separator} />
       <Datepicker
         label="Date End"
         value={endDate}
-        onChange={(date) => { onSelectEndDate(date); }}
+        onChange={(date) => { if (date instanceof Date) onSelectEndDate(date); }}
         size="xs"
         isOutsideRange={day => moment().isSameOrBefore(day)}
       />

src/shared/components/Contentful/TracksFilter/TracksDate/index.jsx

@@ -27,6 +27,11 @@ function Datepicker({
   required,
   size,
   isOutsideRange,
+  hideCustomInputIcon,
+  isDayBlocked,
+  displayFormat,
+  minDate,
+  maxDate,
 }) {
   const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
   const [date, setDate] = useState(value ? moment(value) : null);
@@ -43,7 +48,7 @@ function Datepicker({
     >
       <SingleDatePicker
         hideKeyboardShortcutsPanel
-        customInputIcon={<IconCalendar />}
+        customInputIcon={hideCustomInputIcon ? null : <IconCalendar />}
         date={date}
         onDateChange={(changedDate) => {
           setDate(changedDate);
@@ -58,13 +63,16 @@ function Datepicker({
         numberOfMonths={1}
         navPrev={<IconPrev />}
         navNext={<IconNext />}
-        displayFormat="MMM DD, YYYY"
+        displayFormat={displayFormat}
         daySize={width > 600 ? 47 : 35}
         renderDayContents={d => (<div>{d.date ? d.date() : ''}</div>)}
         enableOutsideDays
         firstDayOfWeek={1}
         weekDayFormat="ddd"
         isOutsideRange={isOutsideRange}
+        isDayBlocked={isDayBlocked}
+        minDate={minDate}
+        maxDate={maxDate}
       />
       {label ? (
         <span styleName="label">
@@ -86,6 +94,11 @@ Datepicker.defaultProps = {
   required: false,
   size: 'lg',
   isOutsideRange: day => moment().isSameOrAfter(day),
+  hideCustomInputIcon: false,
+  isDayBlocked: () => false,
+  displayFormat: 'MMM DD, YYYY',
+  minDate: null,
+  maxDate: null,
 };
 
 Datepicker.propTypes = {
@@ -97,6 +110,11 @@ Datepicker.propTypes = {
   required: PT.bool,
   size: PT.oneOf(['xs', 'lg']),
   isOutsideRange: PT.func,
+  hideCustomInputIcon: PT.bool,
+  isDayBlocked: PT.func,
+  displayFormat: PT.string,
+  minDate: PT.instanceOf(moment),
+  maxDate: PT.instanceOf(moment),
 };
 
 export default Datepicker;