Skip to content

Commit 69b8f63

Browse files
RohoolioRohoolio
committed
feature/PI-788-ui_delete_and_search Added product team delete
1 parent e3629db commit 69b8f63

File tree

2 files changed

+216
-1
lines changed

2 files changed

+216
-1
lines changed

‎test_ui/product_id_flow/src/App.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { useState } from "react";
22
import ProductCreationFlow from "./components/ProductCreationFlow";
33
import ProductSearch from "./components/ProductSearchFlow";
44
import ProductDelete from "./components/ProductDeleteFlow";
5+
import ProductTeamDelete from "./components/ProductDeleteTeamFlow";
56

67
function App() {
78
const [currentFlow, setCurrentFlow] = useState<
8-
"creation" | "search" | "delete" | null
9+
"creation" | "search" | "delete" | "deleteTeam" | null
910
>(null);
1011

1112
const renderFlow = () => {
@@ -16,6 +17,8 @@ function App() {
1617
return <ProductSearch />;
1718
case "delete":
1819
return <ProductDelete />;
20+
case "deleteTeam":
21+
return <ProductTeamDelete />;
1922
default:
2023
return (
2124
<div className="min-h-screen flex flex-col items-center justify-center">
@@ -41,6 +44,12 @@ function App() {
4144
>
4245
Product Delete Flow
4346
</button>
47+
<button
48+
className="nhs-button nhs-button-primary"
49+
onClick={() => setCurrentFlow("deleteTeam")}
50+
>
51+
Product Team Delete Flow
52+
</button>
4453
</div>
4554
</div>
4655
);

‎test_ui/product_id_flow/src/components/ProductDeleteTeamFlow.tsx‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import React, { useState, ChangeEvent } from "react";
2+
3+
// =========== Interfaces ===========
4+
5+
interface EnvironmentConfig {
6+
environment: string;
7+
apiKey: string;
8+
}
9+
10+
interface ProductDeleteTeamResponse {
11+
code: string;
12+
message: string;
13+
}
14+
15+
// =========== Component ===========
16+
const ProductTeamDelete: React.FC = () => {
17+
const [currentStep, setCurrentStep] = useState(0);
18+
const [environmentConfig, setEnvironmentConfig] = useState<EnvironmentConfig>(
19+
{
20+
environment: "",
21+
apiKey: "",
22+
}
23+
);
24+
const [productTeamId, setProductTeamId] = useState("");
25+
const [loading, setLoading] = useState(false);
26+
const [error, setError] = useState<string | null>(null);
27+
const [
28+
productTeamDeleteResponse,
29+
setProductTeamDeleteResponse,
30+
] = useState<ProductDeleteTeamResponse | null>(null);
31+
32+
const isEnvironmentConfigEnabled =
33+
environmentConfig.environment.trim() !== "" &&
34+
environmentConfig.apiKey.trim() !== "";
35+
36+
const handleDeleteTeam = async () => {
37+
setLoading(true);
38+
setError(null);
39+
40+
try {
41+
const response = await fetch(
42+
`https://${environmentConfig.environment}.api.service.nhs.uk/connecting-party-manager/ProductTeam/${productTeamId}`,
43+
{
44+
method: "DELETE",
45+
headers: {
46+
Authorization: "letmein",
47+
apikey: environmentConfig.apiKey,
48+
version: "1",
49+
"Content-Type": "application/json",
50+
},
51+
}
52+
);
53+
54+
if (!response.ok) {
55+
const errorBody = await response.text();
56+
throw new Error(
57+
`HTTP error! status: ${response.status}, body: ${errorBody}`
58+
);
59+
}
60+
61+
const responseData = await response.json();
62+
setProductTeamDeleteResponse(responseData);
63+
} catch (err) {
64+
setError(
65+
`Failed to Delete. Please try again. ${productTeamDeleteResponse}`
66+
);
67+
console.error(err);
68+
} finally {
69+
setLoading(false);
70+
}
71+
};
72+
73+
const getStepContent = () => {
74+
switch (currentStep) {
75+
case 0:
76+
return (
77+
<div>
78+
<div className="nhs-form-group">
79+
<label className="nhs-label" htmlFor="environment">
80+
Environment
81+
</label>
82+
<input
83+
type="text"
84+
placeholder="eg. internal-dev, internal-qa, ref, int"
85+
id="environment"
86+
className="nhs-input"
87+
value={environmentConfig.environment}
88+
onChange={(e: ChangeEvent<HTMLInputElement>) =>
89+
setEnvironmentConfig({
90+
...environmentConfig,
91+
environment: e.target.value,
92+
})
93+
}
94+
/>
95+
</div>
96+
97+
<div className="nhs-form-group">
98+
<label className="nhs-label" htmlFor="apiKey">
99+
API Key
100+
</label>
101+
<input
102+
type="password"
103+
id="apiKey"
104+
className="nhs-input"
105+
value={environmentConfig.apiKey}
106+
onChange={(e: ChangeEvent<HTMLInputElement>) =>
107+
setEnvironmentConfig({
108+
...environmentConfig,
109+
apiKey: e.target.value,
110+
})
111+
}
112+
/>
113+
</div>
114+
115+
<div className="flex justify-end mt-6">
116+
<button
117+
type="button"
118+
onClick={() => setCurrentStep(1)}
119+
disabled={!isEnvironmentConfigEnabled}
120+
className="nhs-button nhs-button-primary"
121+
>
122+
Next
123+
</button>
124+
</div>
125+
</div>
126+
);
127+
case 1:
128+
return (
129+
<div>
130+
<div className="nhs-form-group">
131+
<label className="nhs-label" htmlFor="product_team_id">
132+
Product Team ID
133+
</label>
134+
<input
135+
type="text"
136+
id="product_team_id"
137+
className="nhs-input"
138+
value={productTeamId}
139+
onChange={(e: ChangeEvent<HTMLInputElement>) =>
140+
setProductTeamId(e.target.value)
141+
}
142+
/>
143+
</div>
144+
145+
<div className="flex justify-end mt-6">
146+
<button
147+
type="button"
148+
onClick={handleDeleteTeam}
149+
disabled={loading}
150+
className="nhs-button nhs-button-primary"
151+
>
152+
{loading ? "Deleting..." : "Delete"}
153+
</button>
154+
</div>
155+
156+
{productTeamDeleteResponse && (
157+
<div className="mt-6">
158+
<p>Code: {productTeamDeleteResponse.code}</p>
159+
<p>Message: {productTeamDeleteResponse.message}</p>
160+
</div>
161+
)}
162+
</div>
163+
);
164+
default:
165+
return null;
166+
}
167+
};
168+
169+
return (
170+
<div className="min-h-screen flex flex-col">
171+
<header className="nhs-header">
172+
<div className="max-w-4xl mx-auto flex items-center">
173+
<span className="text-2xl font-bold">NHS</span>
174+
<span className="ml-2 text-lg">Product Team Delete</span>
175+
</div>
176+
</header>
177+
178+
<main className="nhs-main flex-grow">
179+
<h1 className="nhs-title">
180+
{currentStep === 0
181+
? "Configure Environment"
182+
: "Delete A Product Team"}
183+
</h1>
184+
185+
{error && (
186+
<div className="bg-red-50 border-l-4 border-red-600 p-4 mb-6 flex items-center text-red-800">
187+
<p>{error}</p>
188+
</div>
189+
)}
190+
191+
{getStepContent()}
192+
</main>
193+
194+
<footer className="nhs-footer">
195+
<div className="max-w-4xl mx-auto">
196+
<div className="flex items-center">
197+
<span className="font-bold">NHS</span>
198+
<span className="ml-2">© {new Date().getFullYear()}</span>
199+
</div>
200+
</div>
201+
</footer>
202+
</div>
203+
);
204+
};
205+
206+
export default ProductTeamDelete;

0 commit comments

Comments
 (0)