Skip to content

Commit 11b1900

Browse files
jmgasperjmgasper
committed
UI Bugs
#1438 #1439
1 parent e651f16 commit 11b1900

File tree

5 files changed

+161
-152
lines changed

5 files changed

+161
-152
lines changed

‎src/components/ChallengeEditor/index.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ import {
2727
MILESTONE_STATUS,
2828
PHASE_PRODUCT_CHALLENGE_ID_FIELD,
2929
QA_TRACK_ID, DESIGN_CHALLENGE_TYPES, ROUND_TYPES,
30-
MULTI_ROUND_CHALLENGE_TEMPLATE_ID, DS_TRACK_ID
30+
MULTI_ROUND_CHALLENGE_TEMPLATE_ID, DS_TRACK_ID,
31+
CHALLENGE_STATUS
3132
} from '../../config/constants'
3233
import { getDomainTypes, getResourceRoleByName } from '../../util/tc'
3334
import { PrimaryButton, OutlineButton } from '../Buttons'
@@ -1493,7 +1494,7 @@ class ChallengeEditor extends Component {
14931494
/>
14941495
)
14951496
}
1496-
1497+
const statusMessage = challenge.status && challenge.status.split(' ')[0].toUpperCase()
14971498
const errorContainer = <div className={styles.errorContainer}><div className={styles.errorMessage}>{error}</div></div>
14981499

14991500
const actionButtons = <React.Fragment>
@@ -1534,9 +1535,11 @@ class ChallengeEditor extends Component {
15341535
)}
15351536
</div>
15361537
)}
1537-
<div className={styles.button}>
1538-
<CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} />
1539-
</div>
1538+
{statusMessage !== CHALLENGE_STATUS.CANCELLED &&
1539+
<div className={styles.button}>
1540+
<CancelDropDown challenge={challenge} onSelectMenu={cancelChallenge} />
1541+
</div>
1542+
}
15401543
</div>}
15411544
{!isLoading && isActive && <div className={styles.buttonContainer}>
15421545
<div className={styles.button}>

‎src/components/ChallengesComponent/ChallengeList/index.js‎

Lines changed: 107 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import ChallengeCard from '../ChallengeCard'
2121
import Message from '../Message'
2222
import SortIcon from '../../../assets/images/sort-icon.svg'
2323
import Select from '../../Select'
24+
import Loader from '../../Loader'
2425

2526
import { CHALLENGE_STATUS, PAGE_SIZE, PAGINATION_PER_PAGE_OPTIONS } from '../../../config/constants'
2627
import { checkAdmin } from '../../../util/tc'
@@ -352,6 +353,7 @@ class ChallengeList extends Component {
352353
projects,
353354
dashboard,
354355
perPage,
356+
isLoading,
355357
totalChallenges,
356358
partiallyUpdateChallengeDetails,
357359
deleteChallenge,
@@ -678,109 +680,112 @@ class ChallengeList extends Component {
678680
</div>
679681
</div>
680682
</div>
681-
{challenges.length === 0 && (
682-
<NoChallenge
683-
activeProject={activeProject}
684-
selfService={selfService}
685-
/>
686-
)}
687-
{challenges.length > 0 && (
688-
<div className={styles.header}>
689-
<div
690-
className={cn(styles.col5, styles.sortable)}
691-
onClick={() => this.updateSort('type')}
692-
>
693-
<span className={styles.filterItem}>
694-
Type
695-
{this.renderSortIcon('type')}
696-
</span>
697-
</div>
698-
<div
699-
className={cn(styles.col2, styles.sortable)}
700-
onClick={() => this.updateSort('name')}
701-
>
702-
<span className={styles.filterItem}>
703-
Challenge Name
704-
{this.renderSortIcon('name')}
705-
</span>
706-
</div>
707-
<div
708-
className={cn(styles.col3, styles.sortable)}
709-
onClick={() => this.updateSort('startDate')}
710-
>
711-
<span className={styles.filterItem}>
712-
Start Date
713-
{this.renderSortIcon('startDate')}
714-
</span>
715-
</div>
716-
<div
717-
className={cn(styles.col3, styles.sortable)}
718-
onClick={() => this.updateSort('endDate')}
719-
>
720-
<span className={styles.filterItem}>
721-
End Date
722-
{this.renderSortIcon('endDate')}
723-
</span>
724-
</div>
725-
<div
726-
className={cn(styles.col4, styles.sortable)}
727-
onClick={() => this.updateSort('numOfRegistrants')}
728-
>
729-
<span className={styles.filterItem}>
730-
<FontAwesomeIcon icon={faUser} className={styles.faIcon} />
731-
{this.renderSortIcon('numOfRegistrants')}
732-
</span>
733-
</div>
734-
<div
735-
className={cn(styles.col4, styles.sortable)}
736-
onClick={() => this.updateSort('numOfSubmissions')}
737-
>
738-
<span className={styles.filterItem}>
739-
<FontAwesomeIcon icon={faFile} className={styles.faIcon} />
740-
{this.renderSortIcon('numOfSubmissions')}
741-
</span>
742-
</div>
743-
<div
744-
className={cn(styles.col3, styles.sortable)}
745-
onClick={() => this.updateSort('status')}
746-
>
747-
<span className={styles.filterItem}>
748-
Status
749-
{this.renderSortIcon('status')}
750-
</span>
751-
</div>
752-
<div className={styles.col6}>&nbsp;</div>
753-
<div className={styles.col6}>&nbsp;</div>
754-
<div className={styles.col6}>&nbsp;</div>
683+
<div className={styles.header}>
684+
<div
685+
className={cn(styles.col5, styles.sortable)}
686+
onClick={() => this.updateSort('type')}
687+
>
688+
<span className={styles.filterItem}>
689+
Type
690+
{this.renderSortIcon('type')}
691+
</span>
755692
</div>
756-
)}
757-
{challenges.length > 0 && (
758-
<ul className={styles.challengeList}>
759-
{map(challenges, c => {
760-
return (
761-
<li
762-
className={styles.challengeItem}
763-
key={`challenge-card-${c.id}`}
764-
>
765-
<ChallengeCard
766-
shouldShowCurrentPhase={selectedTab === 0}
767-
challenge={c}
768-
setActiveProject={setActiveProject}
769-
reloadChallengeList={this.reloadChallengeList}
770-
partiallyUpdateChallengeDetails={
771-
partiallyUpdateChallengeDetails
772-
}
773-
deleteChallenge={deleteChallenge}
774-
isBillingAccountExpired={isBillingAccountExpired}
775-
disableHover
776-
getStatusText={this.getStatusTextFunc(selfService)}
777-
challengeTypes={challengeTypes}
778-
/>
779-
</li>
693+
<div
694+
className={cn(styles.col2, styles.sortable)}
695+
onClick={() => this.updateSort('name')}
696+
>
697+
<span className={styles.filterItem}>
698+
Challenge Name
699+
{this.renderSortIcon('name')}
700+
</span>
701+
</div>
702+
<div
703+
className={cn(styles.col3, styles.sortable)}
704+
onClick={() => this.updateSort('startDate')}
705+
>
706+
<span className={styles.filterItem}>
707+
Start Date
708+
{this.renderSortIcon('startDate')}
709+
</span>
710+
</div>
711+
<div
712+
className={cn(styles.col3, styles.sortable)}
713+
onClick={() => this.updateSort('endDate')}
714+
>
715+
<span className={styles.filterItem}>
716+
End Date
717+
{this.renderSortIcon('endDate')}
718+
</span>
719+
</div>
720+
<div
721+
className={cn(styles.col4, styles.sortable)}
722+
onClick={() => this.updateSort('numOfRegistrants')}
723+
>
724+
<span className={styles.filterItem}>
725+
<FontAwesomeIcon icon={faUser} className={styles.faIcon} />
726+
{this.renderSortIcon('numOfRegistrants')}
727+
</span>
728+
</div>
729+
<div
730+
className={cn(styles.col4, styles.sortable)}
731+
onClick={() => this.updateSort('numOfSubmissions')}
732+
>
733+
<span className={styles.filterItem}>
734+
<FontAwesomeIcon icon={faFile} className={styles.faIcon} />
735+
{this.renderSortIcon('numOfSubmissions')}
736+
</span>
737+
</div>
738+
<div
739+
className={cn(styles.col3, styles.sortable)}
740+
onClick={() => this.updateSort('status')}
741+
>
742+
<span className={styles.filterItem}>
743+
Status
744+
{this.renderSortIcon('status')}
745+
</span>
746+
</div>
747+
<div className={styles.col6}>&nbsp;</div>
748+
<div className={styles.col6}>&nbsp;</div>
749+
<div className={styles.col6}>&nbsp;</div>
750+
</div>
751+
752+
{isLoading
753+
? <Loader />
754+
: <>
755+
{challenges.length > 0
756+
? <>
757+
<ul className={styles.challengeList}>
758+
{map(challenges, c => {
759+
return (
760+
<li
761+
className={styles.challengeItem}
762+
key={`challenge-card-${c.id}`}
763+
>
764+
<ChallengeCard
765+
shouldShowCurrentPhase={selectedTab === 0}
766+
challenge={c}
767+
setActiveProject={setActiveProject}
768+
reloadChallengeList={this.reloadChallengeList}
769+
partiallyUpdateChallengeDetails={
770+
partiallyUpdateChallengeDetails
771+
}
772+
deleteChallenge={deleteChallenge}
773+
isBillingAccountExpired={isBillingAccountExpired}
774+
disableHover
775+
getStatusText={this.getStatusTextFunc(selfService)}
776+
challengeTypes={challengeTypes}
777+
/>
778+
</li>
779+
)
780+
})}
781+
</ul>
782+
</> : (
783+
<NoChallenge activeProject={activeProject} selfService={selfService} />
780784
)
781-
})}
782-
</ul>
783-
)}
785+
}
786+
</>
787+
}
788+
784789
<div className={styles.footer}>
785790
<div className={styles.perPageContainer}>
786791
<Select
@@ -837,6 +842,7 @@ ChallengeList.propTypes = {
837842
deleteChallenge: PropTypes.func.isRequired,
838843
isBillingAccountExpired: PropTypes.bool,
839844
billingStartDate: PropTypes.string,
845+
isLoading: PropTypes.bool,
840846
billingEndDate: PropTypes.string,
841847
isBillingAccountLoadingFailed: PropTypes.bool,
842848
isBillingAccountLoading: PropTypes.bool,

‎src/components/ChallengesComponent/ChallengesComponent.module.scss‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,32 @@
1111

1212
font-size: 24px;
1313
font-weight: 700;
14-
margin-right: 5px;
14+
margin-right: 8px;
1515
line-height: 29px;
1616
color: $challenges-title;
17-
text-align: center;
17+
text-align: left;
1818
}
1919

2020
.titleContainer {
2121
margin-top: 30px;
2222
display: flex;
2323
justify-content: space-between;
24-
align-items: center;
2524
padding: 0 30px;
2625

2726
}
2827

2928
.titleLinks {
30-
align-items: center;
29+
align-items: flex-start;
3130
display: flex;
3231

32+
span {
33+
min-width: 14%;
34+
margin-top: 3px;
35+
}
36+
3337
> span a {
3438
margin: 2px 5px 0;
39+
min-width: 24%;
3540
}
3641

3742
> a + a {
@@ -40,7 +45,7 @@
4045
}
4146

4247
.buttonLaunchNew {
43-
min-width: 135px;
48+
min-width: 169px;
4449
height: 40px;
4550
text-decoration: none;
4651

‎src/components/ChallengesComponent/index.js‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { CONNECT_APP_URL } from '../../config/constants'
99
import { PrimaryButton } from '../Buttons'
1010
import ChallengeList from './ChallengeList'
1111
import styles from './ChallengesComponent.module.scss'
12-
import Loader from '../Loader'
1312
import xss from 'xss'
1413

1514
const ChallengesComponent = ({
@@ -80,40 +79,37 @@ const ChallengesComponent = ({
8079
)}
8180
</div>}
8281
<div className={styles.challenges}>
83-
{isLoading ? (
84-
<Loader />
85-
) : (
86-
<ChallengeList
87-
challenges={challenges}
88-
projects={projects}
89-
warnMessage={warnMessage}
90-
activeProject={activeProject}
91-
setActiveProject={setActiveProject}
92-
filterChallengeName={filterChallengeName}
93-
filterChallengeType={filterChallengeType}
94-
filterProjectOption={filterProjectOption}
95-
filterDate={filterDate}
96-
filterSortBy={filterSortBy}
97-
filterSortOrder={filterSortOrder}
98-
dashboard={dashboard}
99-
status={status}
100-
loadChallengesByPage={loadChallengesByPage}
101-
activeProjectId={activeProjectId}
102-
page={page}
103-
perPage={perPage}
104-
totalChallenges={totalChallenges}
105-
partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
106-
deleteChallenge={deleteChallenge}
107-
isBillingAccountExpired={isBillingAccountExpired}
108-
billingStartDate={billingStartDate}
109-
billingEndDate={billingEndDate}
110-
isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
111-
isBillingAccountLoading={isBillingAccountLoading}
112-
selfService={selfService}
113-
auth={auth}
114-
challengeTypes={challengeTypes}
115-
/>
116-
)}
82+
<ChallengeList
83+
challenges={challenges}
84+
projects={projects}
85+
warnMessage={warnMessage}
86+
isLoading={isLoading}
87+
activeProject={activeProject}
88+
setActiveProject={setActiveProject}
89+
filterChallengeName={filterChallengeName}
90+
filterChallengeType={filterChallengeType}
91+
filterProjectOption={filterProjectOption}
92+
filterDate={filterDate}
93+
filterSortBy={filterSortBy}
94+
filterSortOrder={filterSortOrder}
95+
dashboard={dashboard}
96+
status={status}
97+
loadChallengesByPage={loadChallengesByPage}
98+
activeProjectId={activeProjectId}
99+
page={page}
100+
perPage={perPage}
101+
totalChallenges={totalChallenges}
102+
partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
103+
deleteChallenge={deleteChallenge}
104+
isBillingAccountExpired={isBillingAccountExpired}
105+
billingStartDate={billingStartDate}
106+
billingEndDate={billingEndDate}
107+
isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
108+
isBillingAccountLoading={isBillingAccountLoading}
109+
selfService={selfService}
110+
auth={auth}
111+
challengeTypes={challengeTypes}
112+
/>
117113
</div>
118114
</div>
119115
)

0 commit comments

Comments
 (0)