Skip to content

Commit 69f7b8e

Browse files
kyle-ssgkyle-ssg
authored
style: change request page (#3942)
1 parent c649d1f commit 69f7b8e

File tree

3 files changed

+144
-170
lines changed

3 files changed

+144
-170
lines changed

‎frontend/web/components/diff/DiffChangeRequest.tsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,13 @@ const DiffChangeRequest: FC<DiffChangeRequestType> = ({
3535
)
3636
}
3737
return (
38-
<div className='col-md-8'>
39-
<DiffFeature
40-
featureId={feature}
41-
disableSegments={!isVersioned}
42-
projectId={projectId}
43-
newState={changeRequest.feature_states}
44-
oldState={data?.results || []}
45-
/>
46-
</div>
38+
<DiffFeature
39+
featureId={feature}
40+
disableSegments={!isVersioned}
41+
projectId={projectId}
42+
newState={changeRequest.feature_states}
43+
oldState={data?.results || []}
44+
/>
4745
)
4846
}
4947

‎frontend/web/components/pages/ChangeRequestPage.js

+134-161
Original file line numberDiff line numberDiff line change
@@ -347,167 +347,144 @@ const ChangeRequestsPage = class extends Component {
347347
: 'Unknown user'}
348348
</PageTitle>
349349
<p className='mt-2'>{changeRequest.description}</p>
350-
<div className='row'>
351-
<div className='col-md-12'>
352-
{isScheduled && (
353-
<div className='col-md-6 mb-4'>
354-
<InfoMessage icon='calendar' title='Scheduled Change'>
355-
This feature change{' '}
356-
{changeRequest?.committedAt
357-
? 'is scheduled to'
358-
: 'will'}{' '}
359-
go live at{' '}
360-
{scheduledDate.format('Do MMM YYYY hh:mma')}
361-
{changeRequest?.committed_at
362-
? ' unless it is edited or deleted'
363-
: ' if it is approved and published'}
364-
.
365-
{!!changeRequest?.committedAt &&
366-
'You can still edit / remove the change request before this date.'}
367-
</InfoMessage>
368-
</div>
369-
)}
370-
<InputGroup
371-
className='col-md-6'
372-
component={
373-
<>
374-
{!Utils.getFlagsmithHasFeature(
375-
'disable_users_as_reviewers',
376-
) && (
377-
<div className='mb-4'>
378-
<SettingsButton
379-
onClick={() =>
380-
this.setState({ showUsers: true })
381-
}
350+
{isScheduled && (
351+
<div className='col-md-6 mb-4'>
352+
<InfoMessage icon='calendar' title='Scheduled Change'>
353+
This feature change{' '}
354+
{changeRequest?.committedAt ? 'is scheduled to' : 'will'}{' '}
355+
go live at {scheduledDate.format('Do MMM YYYY hh:mma')}
356+
{changeRequest?.committed_at
357+
? ' unless it is edited or deleted'
358+
: ' if it is approved and published'}
359+
.
360+
{!!changeRequest?.committedAt &&
361+
'You can still edit / remove the change request before this date.'}
362+
</InfoMessage>
363+
</div>
364+
)}
365+
<InputGroup
366+
className='col-md-6'
367+
component={
368+
<>
369+
{!Utils.getFlagsmithHasFeature(
370+
'disable_users_as_reviewers',
371+
) && (
372+
<div className='mb-4'>
373+
<SettingsButton
374+
onClick={() => this.setState({ showUsers: true })}
375+
>
376+
Assigned users
377+
</SettingsButton>
378+
<Row className='mt-2'>
379+
{ownerUsers.length !== 0 &&
380+
ownerUsers.map((u) => (
381+
<Row
382+
key={u.id}
383+
onClick={() => this.removeOwner(u.id)}
384+
className='chip'
385+
style={{
386+
marginBottom: 4,
387+
marginTop: 4,
388+
}}
389+
>
390+
<span className='font-weight-bold'>
391+
{u.first_name} {u.last_name}
392+
</span>
393+
<span className='chip-icon ion'>
394+
<IonIcon icon={close} />
395+
</span>
396+
</Row>
397+
))}
398+
</Row>
399+
<UserSelect
400+
users={orgUsers}
401+
value={ownerUsers && ownerUsers.map((v) => v.id)}
402+
onAdd={this.addOwner}
403+
onRemove={this.removeOwner}
404+
isOpen={this.state.showUsers}
405+
onToggle={() =>
406+
this.setState({
407+
showUsers: !this.state.showUsers,
408+
})
409+
}
410+
/>
411+
</div>
412+
)}
413+
<div className='mb-4'>
414+
<SettingsButton
415+
onClick={() => this.setState({ showGroups: true })}
416+
>
417+
Assigned groups
418+
</SettingsButton>
419+
<Row className='mt-2'>
420+
{!!ownerGroups?.length &&
421+
ownerGroups.map((g) => (
422+
<Row
423+
key={g.id}
424+
onClick={() => this.removeOwner(g.id, false)}
425+
className='chip'
426+
style={{
427+
marginBottom: 4,
428+
marginTop: 4,
429+
}}
382430
>
383-
Assigned users
384-
</SettingsButton>
385-
<Row className='mt-2'>
386-
{ownerUsers.length !== 0 &&
387-
ownerUsers.map((u) => (
388-
<Row
389-
key={u.id}
390-
onClick={() => this.removeOwner(u.id)}
391-
className='chip'
392-
style={{
393-
marginBottom: 4,
394-
marginTop: 4,
395-
}}
396-
>
397-
<span className='font-weight-bold'>
398-
{u.first_name} {u.last_name}
399-
</span>
400-
<span className='chip-icon ion'>
401-
<IonIcon icon={close} />
402-
</span>
403-
</Row>
404-
))}
431+
<span className='font-weight-bold'>
432+
{g.name}
433+
</span>
434+
<span className='chip-icon ion'>
435+
<IonIcon icon={close} />
436+
</span>
405437
</Row>
406-
<UserSelect
407-
users={orgUsers}
408-
value={
409-
ownerUsers && ownerUsers.map((v) => v.id)
410-
}
411-
onAdd={this.addOwner}
412-
onRemove={this.removeOwner}
413-
isOpen={this.state.showUsers}
414-
onToggle={() =>
415-
this.setState({
416-
showUsers: !this.state.showUsers,
417-
})
418-
}
419-
/>
420-
</div>
421-
)}
422-
<div className='mb-4'>
423-
<SettingsButton
424-
onClick={() =>
425-
this.setState({ showGroups: true })
426-
}
427-
>
428-
Assigned groups
429-
</SettingsButton>
430-
<Row className='mt-2'>
431-
{!!ownerGroups?.length &&
432-
ownerGroups.map((g) => (
433-
<Row
434-
key={g.id}
435-
onClick={() =>
436-
this.removeOwner(g.id, false)
437-
}
438-
className='chip'
439-
style={{
440-
marginBottom: 4,
441-
marginTop: 4,
442-
}}
443-
>
444-
<span className='font-weight-bold'>
445-
{g.name}
446-
</span>
447-
<span className='chip-icon ion'>
448-
<IonIcon icon={close} />
449-
</span>
450-
</Row>
451-
))}
452-
</Row>
453-
<MyGroupsSelect
454-
orgId={AccountStore.getOrganisation().id}
455-
groups={orgGroups}
456-
value={
457-
ownerGroups && ownerGroups.map((v) => v.id)
458-
}
459-
onAdd={this.addOwner}
460-
onRemove={this.removeOwner}
461-
isOpen={this.state.showGroups}
462-
onToggle={() =>
463-
this.setState({
464-
showGroups: !this.state.showGroups,
465-
})
466-
}
467-
/>
468-
</div>
469-
</>
470-
}
471-
/>
438+
))}
439+
</Row>
440+
<MyGroupsSelect
441+
orgId={AccountStore.getOrganisation().id}
442+
groups={orgGroups}
443+
value={ownerGroups && ownerGroups.map((v) => v.id)}
444+
onAdd={this.addOwner}
445+
onRemove={this.removeOwner}
446+
isOpen={this.state.showGroups}
447+
onToggle={() =>
448+
this.setState({
449+
showGroups: !this.state.showGroups,
450+
})
451+
}
452+
/>
453+
</div>
454+
</>
455+
}
456+
/>
472457

473-
<div>
474-
<Panel
475-
title={
476-
isScheduled ? 'Scheduled Change' : 'Change Request'
477-
}
478-
className='no-pad mb-2'
479-
>
480-
<div className='search-list col-md-8 change-request-list'>
481-
<Row className='list-item change-request-item px-4'>
482-
<div className='font-weight-medium mr-3'>
483-
Feature:
484-
</div>
458+
<div>
459+
<Panel
460+
title={isScheduled ? 'Scheduled Change' : 'Change Request'}
461+
className='no-pad mb-2'
462+
>
463+
<div className='search-list change-request-list'>
464+
<Row className='list-item change-request-item px-4'>
465+
<div className='font-weight-medium mr-3'>Feature:</div>
485466

486-
<a
487-
target='_blank'
488-
className='btn-link font-weight-medium'
489-
href={`/project/${
490-
this.props.match.params.projectId
491-
}/environment/${
492-
this.props.match.params.environmentId
493-
}/features?feature=${
494-
projectFlag && projectFlag.id
495-
}`}
496-
rel='noreferrer'
497-
>
498-
{projectFlag && projectFlag.name}
499-
</a>
500-
</Row>
501-
</div>
502-
</Panel>
503-
<DiffChangeRequest
504-
isVersioned={isVersioned}
505-
changeRequest={changeRequest}
506-
feature={projectFlag.id}
507-
projectId={this.props.match.params.projectId}
508-
/>
467+
<a
468+
target='_blank'
469+
className='btn-link font-weight-medium'
470+
href={`/project/${
471+
this.props.match.params.projectId
472+
}/environment/${
473+
this.props.match.params.environmentId
474+
}/features?feature=${projectFlag && projectFlag.id}`}
475+
rel='noreferrer'
476+
>
477+
{projectFlag && projectFlag.name}
478+
</a>
479+
</Row>
509480
</div>
510-
</div>
481+
</Panel>
482+
<DiffChangeRequest
483+
isVersioned={isVersioned}
484+
changeRequest={changeRequest}
485+
feature={projectFlag.id}
486+
projectId={this.props.match.params.projectId}
487+
/>
511488
</div>
512489
<JSONReference
513490
className='mt-4'
@@ -539,7 +516,7 @@ const ChangeRequestsPage = class extends Component {
539516
by {committedBy.first_name} {committedBy.last_name}
540517
</div>
541518
) : (
542-
<Row className='text-right col-md-8'>
519+
<Row className='text-right mt-2'>
543520
<Flex />
544521
{!isYourChangeRequest &&
545522
Utils.renderWithPermission(
@@ -576,10 +553,6 @@ const ChangeRequestsPage = class extends Component {
576553
)}
577554
</Flex>
578555
</Row>
579-
580-
<Row>
581-
<div style={{ minHeight: 300 }} />
582-
</Row>
583556
</div>
584557
)}
585558
</Permission>

‎frontend/web/styles/3rdParty/_react-diff.scss

+3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
justify-content: center;
2323
display: flex;
2424
align-items: center;
25+
>* {
26+
margin: 0;
27+
}
2528
&.react-diff-marker--added {
2629
background-color: $success-alfa-16 !important;
2730

0 commit comments

Comments
 (0)