Skip to content

Commit

Permalink
feat: finalize modification of review once decision has been made
Browse files Browse the repository at this point in the history
  • Loading branch information
@kriscooke
kriscooke committed Apr 23, 2021
1 parent 11c72fb commit 5ee53aa
Show file tree
Hide file tree
Showing 6 changed files with 276 additions and 25 deletions.
44 changes: 24 additions & 20 deletions app/containers/Admin/ApplicationReview/ReviewSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ import GenericConfirmationModal from 'components/GenericConfirmationModal';
interface Props {
onClose: () => void;
applicationReviewStep: ReviewSidebar_applicationReviewStep;
isFinalized: boolean;
relay: RelayProp;
headerOffset?: number;
}

export const ReviewSidebar: React.FunctionComponent<Props> = ({
onClose,
applicationReviewStep,
isFinalized,
relay,
headerOffset = 68
}) => {
Expand Down Expand Up @@ -87,6 +89,24 @@ export const ReviewSidebar: React.FunctionComponent<Props> = ({
Mark this review step completed
</Button>
);
const markIncompleteButton = (
<p className="mark-incomplete">
<FontAwesomeIcon icon={faCheck} style={{marginRight: 2}} />
<span> This review step has been completed. </span>
<Button
variant="link"
style={{
padding: '0 0 2px 0',
fontSize: '0.9rem',
lineHeight: 1,
display: 'inline'
}}
onClick={() => markReviewStepComplete(false)}
>
Mark incomplete
</Button>
</p>
);
const resolveComment = async (id, resolve) => {
const {environment} = relay;
const variables = {
Expand Down Expand Up @@ -182,26 +202,10 @@ export const ReviewSidebar: React.FunctionComponent<Props> = ({
×
</button>
<h2>{reviewStepName} Review</h2>
{applicationReviewStep?.isComplete ? (
<p className="mark-incomplete">
<FontAwesomeIcon icon={faCheck} style={{marginRight: 2}} />
<span> This review step has been completed. </span>
<Button
variant="link"
style={{
padding: '0 0 2px 0',
fontSize: '0.9rem',
lineHeight: 1,
display: 'inline'
}}
onClick={() => markReviewStepComplete(false)}
>
Mark incomplete
</Button>
</p>
) : (
markCompletedButton
)}
{!isFinalized &&
(applicationReviewStep?.isComplete
? markIncompleteButton
: markCompletedButton)}
<div id="scrollable-comments" tabIndex={0}>
<h3 id="general-comments-label">
General Comments{' '}
Expand Down
3 changes: 3 additions & 0 deletions app/pages/analyst/application-review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ class ApplicationReview extends Component<Props, State> {
) {
query {
session {
userGroups
...defaultLayout_session
}
application(id: $applicationId) {
Expand Down Expand Up @@ -108,6 +109,7 @@ class ApplicationReview extends Component<Props, State> {
const {overrideJustification} = query?.applicationRevision;
const {applicationRevisionStatus} = query?.application.reviewRevisionStatus;
const {session} = query || {};
const currentReviewIsFinalized = applicationRevisionStatus !== 'SUBMITTED';

return (
<DefaultLayout
Expand Down Expand Up @@ -196,6 +198,7 @@ class ApplicationReview extends Component<Props, State> {
applicationReviewStep={this.findStepById(
this.state.selectedReviewStepId
)}
isFinalized={currentReviewIsFinalized}
onClose={this.closeSidebar}
headerOffset={runtimeConfig.SITEWIDE_NOTICE ? 108 : undefined}
/>
Expand Down
22 changes: 22 additions & 0 deletions app/tests/unit/containers/Admin/ApplicationReview/ReviewSidebar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithComments();
const r = shallow(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand All @@ -114,6 +115,20 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStep();
const r = shallow(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
/>
);
expect(r).toMatchSnapshot();
});
it('should match the last accepted snapshot (review finalized, decision has been made)', async () => {
const relay = {environment: null};
const data = applicationReviewStepWithAllCommentsResolved();
const r = shallow(
<ReviewSidebar
isFinalized
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand All @@ -126,6 +141,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithComments();
const r = shallow(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand All @@ -140,6 +156,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithComments();
const r = shallow(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand Down Expand Up @@ -190,6 +207,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithComments();
const r = shallow(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={onClose}
relay={relay as any}
Expand All @@ -207,6 +225,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithComments();
const r = mount(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand All @@ -225,6 +244,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithAllCommentsResolved();
const r = mount(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand Down Expand Up @@ -253,6 +273,7 @@ describe('ReviewSidebar', () => {
const data = applicationReviewStepWithComments();
const r = mount(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand Down Expand Up @@ -286,6 +307,7 @@ describe('ReviewSidebar', () => {
};
const r = shallow(
<ReviewSidebar
isFinalized={false}
applicationReviewStep={data as ReviewSidebar_applicationReviewStep}
onClose={() => {}}
relay={relay as any}
Expand Down
131 changes: 131 additions & 0 deletions app/tests/unit/containers/Admin/ApplicationReview/__snapshots__/ReviewSidebar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,137 @@ exports[`ReviewSidebar should match the last accepted snapshot (no comments) 1`]
</div>
`;

exports[`ReviewSidebar should match the last accepted snapshot (review finalized, decision has been made) 1`] = `
<div
className="jsx-3598414504 col-md-5 col-lg-4 col-xxl-3"
id="sidebar"
>
<button
aria-label="Close Technical Review"
className="jsx-3598414504"
id="close"
onClick={[Function]}
type="button"
>
×
</button>
<h2
className="jsx-3598414504"
>
Technical
Review
</h2>
<div
className="jsx-3598414504"
id="scrollable-comments"
tabIndex={0}
>
<h3
className="jsx-3598414504"
id="general-comments-label"
>
General Comments
<small
className="jsx-3598414504"
>
<em
className="jsx-3598414504"
>
(Visible to applicant)
</em>
</small>
</h3>
<p
className="jsx-3598414504 empty-comments"
>
No general comments to show.
</p>
<h3
className="jsx-3598414504"
id="internal-comments-label"
>
Internal Comments
<FontAwesomeIcon
border={false}
className=""
fixedWidth={false}
flip={null}
icon={
Object {
"icon": Array [
448,
512,
Array [],
"f023",
"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z",
],
"iconName": "lock",
"prefix": "fas",
}
}
inverse={false}
listItem={false}
mask={null}
pull={null}
pulse={false}
rotation={null}
size={null}
spin={false}
swapOpacity={false}
symbol={false}
title=""
transform={null}
/>
<small
className="jsx-3598414504"
>
<em
className="jsx-3598414504"
>
(Not visible to applicant)
</em>
</small>
</h3>
<p
className="jsx-3598414504 empty-comments"
>
No internal comments to show.
</p>
</div>
<div
className="jsx-3598414504"
id="button-footer"
>
<Button
active={false}
disabled={false}
onClick={[Function]}
style={
Object {
"padding": 0,
}
}
variant="link"
>
Show resolved comments
</Button>
</div>
<JSXStyle
dynamic={
Array [
68,
68,
]
}
id="3059376100"
>
#sidebar.__jsx-style-dynamic-selector{position:fixed;top:68px;right:0;height:calc(100% - 68px);background:#f7f7f7;border:1px solid transparent;border-left-color:#dfdfdf;padding:0 1.5em;}#close.__jsx-style-dynamic-selector{font-size:2.2rem;position:absolute;top:0;left:1rem;cursor:pointer;border:none;background:none;}h2.__jsx-style-dynamic-selector{margin:15px 0;text-align:center;}h3.__jsx-style-dynamic-selector{font-size:1em;font-weight:bold;margin:5px 0 15px 0;}h3.__jsx-style-dynamic-selector:not(:first-of-type){margin-top:2em;}#scrollable-comments.__jsx-style-dynamic-selector{overflow-y:scroll;height:calc(100% - 108px - 2.4rem - 53px);margin:1.2rem 0;padding:0.7rem;border-radius:4px;}#scrollable-comments.__jsx-style-dynamic-selector:hover{box-shadow:inset 0 0px 7px -1px #999;}#scrollable-comments.__jsx-style-dynamic-selector::-webkit-scrollbar{-webkit-appearance:none;width:8px;}#scrollable-comments.__jsx-style-dynamic-selector::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,0.5);box-shadow:0 0 1px rgba(255,255,255,0.5);}#button-footer.__jsx-style-dynamic-selector{position:absolute;bottom:0;margin-bottom:15px;width:calc(100% - 3em);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.mark-incomplete.__jsx-style-dynamic-selector{line-height:1;font-size:0.9em;text-align:center;margin:35px 0;}h3.__jsx-style-dynamic-selector~ul.__jsx-style-dynamic-selector,h3.__jsx-style-dynamic-selector~p.__jsx-style-dynamic-selector{padding-left:0.3em;}ul.__jsx-style-dynamic-selector:last-of-type{margin:0;}.empty-comments.__jsx-style-dynamic-selector{font-style:italic;font-size:0.9em;margin-bottom:0;line-height:1.5;color:#666;}
</JSXStyle>
</div>
`;

exports[`ReviewSidebar should match the last accepted snapshot (with comments) 1`] = `
<div
className="jsx-3598414504 col-md-5 col-lg-4 col-xxl-3"
Expand Down
Loading

0 comments on commit 5ee53aa

Please sign in to comment.