Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Show scheduled change request #3118

Merged
merged 2 commits into from
Dec 8, 2023
Merged

fix: Show scheduled change request #3118

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f328bf8
Show scheduled change request
kyle-ssg Dec 8, 2023
202c471
Hide change request CTAs when they are committed
kyle-ssg Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 106 additions & 113 deletions frontend/web/components/pages/ChangeRequestPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,22 +351,24 @@ const ChangeRequestsPage = class extends Component {
</nav>
<PageTitle
cta={
<Row>
<Button
theme='secondary'
onClick={this.deleteChangeRequest}
>
Delete
</Button>
<Button
onClick={() =>
this.editChangeRequest(projectFlag, environmentFlag)
}
className='ml-2'
>
Edit
</Button>
</Row>
!changeRequest?.committed_at && (
<Row>
<Button
theme='secondary'
onClick={this.deleteChangeRequest}
>
Delete
</Button>
<Button
onClick={() =>
this.editChangeRequest(projectFlag, environmentFlag)
}
className='ml-2'
>
Edit
</Button>
</Row>
)
}
title={changeRequest.title}
>
Expand Down Expand Up @@ -520,11 +522,7 @@ const ChangeRequestsPage = class extends Component {
}
/>

<div
style={{
maxWidth: changeRequest.committed_at ? '530px' : '',
}}
>
<div>
<Panel
title={
isScheduled ? 'Scheduled Change' : 'Change Request'
Expand Down Expand Up @@ -652,102 +650,97 @@ const ChangeRequestsPage = class extends Component {
</div>
</Panel>
</Flex>

{!changeRequest.committed_at && (
<Flex>
<Panel className='no-pad panel-change-request'>
<div className='search-list'>
<Row className='table-header px-4'>
{isScheduled
? 'Scheduled Change'
: 'Change Request'}
</Row>
<Row className='list-item change-request-item px-4'>
<div
className='font-weight-medium mr-3'
style={{ width: labelWidth }}
>
Enabled:
</div>
<Switch
checked={newEnabled}
disabled
style={{
opacity:
newEnabled === oldEnabled ? 0.25 : 1,
}}
<Flex>
<Panel className='no-pad panel-change-request'>
<div className='search-list'>
<Row className='table-header px-4'>
{isScheduled
? 'Scheduled Change'
: 'Change Request'}
</Row>
<Row className='list-item change-request-item px-4'>
<div
className='font-weight-medium mr-3'
style={{ width: labelWidth }}
>
Enabled:
</div>
<Switch
checked={newEnabled}
disabled
style={{
opacity:
newEnabled === oldEnabled ? 0.25 : 1,
}}
/>
</Row>
<Row className='list-item change-request-item px-4 align-items-start'>
<div
className='font-weight-medium mr-3'
style={{ width: labelWidth }}
>
Value:
</div>
<Flex
style={{
opacity: oldValue === newValue ? 0.25 : 1,
}}
>
<label>Value</label>
<ValueEditor
value={newValue}
className={classnames('code-medium', {
'change-request-updated-value':
oldValue !== newValue,
})}
/>
</Row>
<Row className='list-item change-request-item px-4 align-items-start'>
<div
className='font-weight-medium mr-3'
style={{ width: labelWidth }}
>
Value:
</div>
<Flex
style={{
opacity: oldValue === newValue ? 0.25 : 1,
}}
>
<label>Value</label>
<ValueEditor
value={newValue}
className={classnames('code-medium', {
'change-request-updated-value':
oldValue !== newValue,
})}
/>
</Flex>
</Row>
</Flex>
</Row>

{isMv &&
mvData.map((v, i) => (
<Row
key={i}
className='list-item px-4 align-start change-request-item'
{isMv &&
mvData.map((v, i) => (
Comment on lines +700 to +701
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understanding you're just dealing with existing code and changing the tabbing, but since it is involved with the PR I'll just mention that the name isMv and mvData and map((v, i) => ... make this section sorta hard to understand.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, this is essentially showing differences in change request on multivariate flag variations.

<Row
key={i}
className='list-item px-4 align-start change-request-item'
>
<div
style={{ width: labelWidth }}
className='font-weight-medium flex flex-row align-items-center mr-3'
>
<div
style={{ width: labelWidth }}
className='font-weight-medium flex flex-row align-items-center mr-3'
>
<div className='flex flex-row align-items-center align-self-start'>
<span className='mr-1'>
Variation {i + 1}
</span>
<Tooltip
place='bottom'
title={
<Icon name='info-outlined' />
}
className='ml-1'
noIcon
>
{Utils.getTypedValue(v.value)}
</Tooltip>
</div>
<div className='flex flex-row align-items-center align-self-start'>
<span className='mr-1'>
Variation {i + 1}
</span>
<Tooltip
place='bottom'
title={<Icon name='info-outlined' />}
className='ml-1'
noIcon
>
{Utils.getTypedValue(v.value)}
</Tooltip>
</div>
<Flex
style={{
opacity: !v.changed ? 0.25 : 1,
}}
>
<label>Environment Weight %</label>
<Input
value={v.newValue}
className={classnames('code-medium', {
'change-request-updated-value':
v.changed,
})}
style={{ pointerEvents: 'none' }}
/>
</Flex>
</Row>
))}
</div>
</Panel>
</Flex>
)}
</div>
<Flex
style={{
opacity: !v.changed ? 0.25 : 1,
}}
>
<label>Environment Weight %</label>
<Input
value={v.newValue}
className={classnames('code-medium', {
'change-request-updated-value':
v.changed,
})}
style={{ pointerEvents: 'none' }}
/>
</Flex>
</Row>
))}
</div>
</Panel>
</Flex>
</Flex>
</div>
</div>
Expand Down