Skip to content

Commit

Permalink
GUI Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
lambeb committed Oct 31, 2024
1 parent c31be02 commit 63b806a
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 32 deletions.
26 changes: 14 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,18 +63,19 @@ git clone https://github.com/ONSdigital/blaise-deploy-questionnaire-service.git

Create a new .env file and add the following variables.

| Variable | Description | Var Example |
|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| PORT | **Optional variable**, specify the Port for express server to run on. If not passed in this is set as 5000 by default. <br><br>It's best not to set this as the react project will try and use the variable as well and conflict. By default, React project locally runs on port 3000 | 5009 |
| BLAISE_API_URL | URL that the [Blaise Rest API](https://github.com/ONSdigital/blaise-api-rest) is running on to send calls to | localhost:90 |
| PROJECT_ID | GCP Project ID | ons-blaise-dev-matt55 |
| BUCKET_NAME | GCP Bucket name for the Questionnaire file to be put in | ons-blaise-dev-matt55-dqs |
| SERVER_PARK | Name of Blaise Server Park | gusty |
| BIMS_API_URL | URL that the [BIMS Service](https://github.com/ONSdigital/blaise-instrument-metadata-service) is running on to send calls to set and get the live date | localhost:5011 |
| BIMS_CLIENT_ID | GCP IAP ID for the [BIMS Service](https://github.com/ONSdigital/blaise-instrument-metadata-service) | randomKey0112 |
| BUS_API_CLIENT | Not needed for local development but the config will look for this variables in the .env file and throw an error if it is not found. Hence, give them a random string | FOO |
| BUS_CLIENT_ID | Not needed for local development but the config will look for this variables in the .env file and throw an error if it is not found. Hence, give them a random string | FOO |
| CREATE_DONOR_CASES_CLOUD_FUNCTION_URL | URL to trigger the Create Donor Cases Cloud Function in GCP. This is needed when you want to deploy donor cases for an IPS questionnaire. **The Cloud Function needs to be deployed in GCP**. | https://example-cloud-function-url.com |
| Variable | Description | Var Example |
|-------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| PORT | **Optional variable**, specify the Port for express server to run on. If not passed in this is set as 5000 by default. <br><br>It's best not to set this as the react project will try and use the variable as well and conflict. By default, React project locally runs on port 3000 | 5009 |
| BLAISE_API_URL | URL that the [Blaise Rest API](https://github.com/ONSdigital/blaise-api-rest) is running on to send calls to | localhost:90 |
| PROJECT_ID | GCP Project ID | ons-blaise-dev-matt55 |
| BUCKET_NAME | GCP Bucket name for the Questionnaire file to be put in | ons-blaise-dev-matt55-dqs |
| SERVER_PARK | Name of Blaise Server Park | gusty |
| BIMS_API_URL | URL that the [BIMS Service](https://github.com/ONSdigital/blaise-instrument-metadata-service) is running on to send calls to set and get the live date | localhost:5011 |
| BIMS_CLIENT_ID | GCP IAP ID for the [BIMS Service](https://github.com/ONSdigital/blaise-instrument-metadata-service) | randomKey0112 |
| BUS_API_CLIENT | Not needed for local development but the config will look for this variables in the .env file and throw an error if it is not found. Hence, give them a random string | FOO |
| BUS_CLIENT_ID | Not needed for local development but the config will look for this variables in the .env file and throw an error if it is not found. Hence, give them a random string | FOO |
| CREATE_DONOR_CASES_CLOUD_FUNCTION_URL | URL to trigger the Create Donor Cases Cloud Function in GCP. This is needed when you want to deploy donor cases for an IPS questionnaire. **The Cloud Function needs to be deployed in GCP**. | https://example-cloud-function-url.com |
| REISSUE_NEW_DONOR_CASE_CLOUD_FUNCTION_URL | URL to trigger the Reissue New Donor Case Cloud Function in GCP. This is needed when you want to reissue a new donor case for an IPS questionnaire. **The Cloud Function needs to be deployed in GCP**. | https://example-cloud-function-url.com |

To find the `X_CLIENT_ID`, navigate to the GCP console, search for `IAP`, click the three dots on right of the service and select `OAuth`. `Client Id` will be on the right.

Expand All @@ -92,6 +93,7 @@ BIMS_CLIENT_ID=randomKey0778
BUS_API_URL=FOO
BUS_CLIENT_ID=FOO
CREATE_DONOR_CASES_CLOUD_FUNCTION_URL=<cloud-function-url>
REISSUE_NEW_DONOR_CASE_CLOUD_FUNCTION_URL=<cloud-function-url>
```
**NB** DQS environment variables for sandboxes can be found within GCP > App Engine > Versions > DQS service > Config

Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,33 @@
import React, { ReactElement, useState } from "react";
import { Questionnaire } from "blaise-api-node-client";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { ONSButton } from "blaise-design-system-react-components";

interface Props {
questionnaire: Questionnaire;
}

function ReissueNewDonorCase({ questionnaire }: Props): ReactElement {
const [user, setUser] = useState("");
const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState("");

const navigate = useNavigate();

function reissueNewDonorCaseButtonClicked() {
const trimmedUser = user.trim();
setUser(trimmedUser);

// Check if input is empty after trimming
if (trimmedUser === "") {
setErrorMessage("User input cannot be empty or contain only spaces");
setError(true);
} else {
setError(false);
setErrorMessage("");
navigate("/reissueNewDonorCaseConfirmation", { state: { section: "reissueNewDonorCase", questionnaire: questionnaire, user: trimmedUser } });
}
}

return (
<>
Expand All @@ -23,25 +43,18 @@ function ReissueNewDonorCase({ questionnaire }: Props): ReactElement {
<label className="ons-label" htmlFor="user">
User to issue new donor case for
</label>
<input type="text" id="user" className="ons-input ons-input--text ons-input-type__input" onChange={(e) => setUser(e.target.value)}/>
<input type="text" id="user" className="ons-input ons-input--text ons-input-type__input" value={user} onChange={(e) => setUser(e.target.value)}/>
</div>
{error && <p className="ons-summary__item--error">{errorMessage}</p>}
</div>
</td>
<td className="ons-summary__values" colSpan={2} rowSpan={2}>
<br/>
<br/>
<Link
to="/reissueNewDonorCaseConfirmation"
state={{
section: "reissueNewDonorCase",
questionnaire: questionnaire,
user: user
}}
className="ons-summary__button"
aria-label={`Reissue new donor case for ${questionnaire.name} on behalf of ${user}`}
>
Reissue Donor case
</Link>
<ONSButton
label="Reissue Donor Case"
primary={false}
onClick={reissueNewDonorCaseButtonClicked}
/>
</td>
</tr>
</tbody>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ function ReissueNewDonorCaseConfirmation(): ReactElement {

async function callReissueNewDonorCaseCloudFunction() {
isLoading(true);
console.log(questionnaire.name, user);
const payload = { questionnaire_name: questionnaire.name, user: user };
let res;
try {
Expand Down Expand Up @@ -51,7 +52,7 @@ function ReissueNewDonorCaseConfirmation(): ReactElement {
(
<>
<h1 className="u-mb-l">
Reissue a new donor case for {questionnaire.name} on behalf of {user}?
Reissue a new donor case for <em>{questionnaire.name}</em> on behalf of <em>{user}</em>?
</h1>
<ONSButton
label="Continue"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface Props {
role: string;
}

function ReissueNewDonorCaseSummary({ responseMessage, statusCode, role }: Props): ReactElement {
function ReissueNewDonorCaseSummary({ statusCode, role }: Props): ReactElement {

return (
<>
Expand All @@ -24,9 +24,6 @@ function ReissueNewDonorCaseSummary({ responseMessage, statusCode, role }: Props
<h1>
Error reissuing new donor case for {role}
</h1>
<p>
{responseMessage}
</p>
<p>
When reporting this issue to the Service Desk, please provide the questionnaire name, time and date of the failure.
</p>
Expand Down

0 comments on commit 63b806a

Please sign in to comment.