Skip to content

Commit b9873fa

Browse files
prakashsvmxdvaldivia
prakashsvmx
and
dvaldivia
authored
UX Notification endpoints (#1257)
Co-authored-by: Daniel Valdivia <[email protected]>
1 parent 62fe583 commit b9873fa

File tree

6 files changed

+143
-169
lines changed

6 files changed

+143
-169
lines changed

‎portal-ui/src/common/BackLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const BackLink = ({ to, label, classes }: IBackLink) => {
5555
<div className={classes.icon}>
5656
<BackSettingsIcon />
5757
</div>
58-
<div>{label}</div>
58+
<div className={classes.label}>{label}</div>
5959
</Link>
6060
);
6161
};

‎portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx‎

Lines changed: 28 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,11 @@ import { ErrorResponseHandler } from "../../../common/types";
4040

4141
import { IElementValue } from "../Configurations/types";
4242
import PageHeader from "../Common/PageHeader/PageHeader";
43-
import { BackSettingsIcon } from "../../../icons";
4443
import history from "../../../history";
4544

4645
import withSuspense from "../Common/Components/withSuspense";
46+
import BackLink from "../../../common/BackLink";
47+
import PageLayout from "../Common/Layout/PageLayout";
4748

4849
const ConfMySql = withSuspense(
4950
React.lazy(() => import("./CustomForms/ConfMySql"))
@@ -61,23 +62,6 @@ const styles = (theme: Theme) =>
6162
createStyles({
6263
...modalBasic,
6364
...settingsCommon,
64-
strongText: {
65-
fontWeight: 700,
66-
},
67-
keyName: {
68-
marginLeft: 5,
69-
},
70-
buttonContainer: {
71-
textAlign: "right",
72-
},
73-
lambdaFormIndicator: {
74-
display: "flex",
75-
marginBottom: 40,
76-
},
77-
customTitle: {
78-
...settingsCommon.customTitle,
79-
marginTop: 0,
80-
},
8165
lambdaNotif: {
8266
background:
8367
"linear-gradient(90deg, rgba(249,249,250,1) 0%, rgba(250,250,251,1) 68%, rgba(254,254,254,1) 100%)",
@@ -88,7 +72,6 @@ const styles = (theme: Theme) =>
8872
alignItems: "center",
8973
justifyContent: "start",
9074
marginBottom: 16,
91-
marginRight: 8,
9275
cursor: "pointer",
9376
padding: 0,
9477
overflow: "hidden",
@@ -112,13 +95,9 @@ const styles = (theme: Theme) =>
11295
fontFamily: "Lato,sans-serif",
11396
paddingLeft: 18,
11497
},
115-
mainCont: {
116-
maxWidth: 1180,
117-
paddingLeft: 38,
118-
paddingRight: 38,
119-
},
120-
backTo: {
121-
margin: "20px 0px 0",
98+
formBox: {
99+
border: "1px solid #EAEAEA",
100+
padding: 15,
122101
},
123102
});
124103

@@ -208,20 +187,13 @@ const AddNotificationEndpoint = ({
208187
return (
209188
<Fragment>
210189
<PageHeader label="Notification Endpoints" />
211-
<form noValidate onSubmit={submitForm}>
212-
<Grid container className={classes.mainCont}>
213-
<Grid item xs={12} className={classes.backTo}>
214-
<button
215-
onClick={() => {
216-
history.push("/notification-endpoints/add");
217-
}}
218-
className={classes.backButton}
219-
>
220-
<BackSettingsIcon />
221-
Back To Supported Services
222-
</button>
223-
</Grid>
190+
<BackLink
191+
to="/notification-endpoints/add"
192+
label={" Back To Supported Services"}
193+
/>
224194

195+
<PageLayout>
196+
<form noValidate onSubmit={submitForm}>
225197
{service !== "" && (
226198
<Fragment>
227199
<Grid item xs={12}>
@@ -247,23 +219,25 @@ const AddNotificationEndpoint = ({
247219
</div>
248220
)}
249221
</Grid>
250-
<Grid item xs={12}>
251-
{srvComponent}
252-
</Grid>
253-
<Grid item xs={12} className={classes.settingsButtonContainer}>
254-
<Button
255-
type="submit"
256-
variant="contained"
257-
color="primary"
258-
disabled={saving}
259-
>
260-
Save Notification Target
261-
</Button>
262-
</Grid>
222+
<div className={classes.formBox}>
223+
<Grid item xs={12} className={classes.configForm}>
224+
{srvComponent}
225+
</Grid>
226+
<Grid item xs={12} className={classes.settingsButtonContainer}>
227+
<Button
228+
type="submit"
229+
variant="contained"
230+
color="primary"
231+
disabled={saving}
232+
>
233+
Save Notification Target
234+
</Button>
235+
</Grid>
236+
</div>
263237
</Fragment>
264238
)}
265-
</Grid>
266-
</form>
239+
</form>
240+
</PageLayout>
267241
</Fragment>
268242
);
269243
};

‎portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ import Grid from "@mui/material/Grid";
2222
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
2323
import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
2424
import { IElementValue } from "../../Configurations/types";
25-
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
25+
import {
26+
formFieldStyles,
27+
modalBasic,
28+
} from "../../Common/FormComponents/common/styleLibrary";
2629
import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
2730
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
2831
import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
@@ -35,6 +38,7 @@ interface IConfMySqlProps {
3538
const styles = (theme: Theme) =>
3639
createStyles({
3740
...modalBasic,
41+
...formFieldStyles,
3842
});
3943

4044
const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
@@ -146,7 +150,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
146150
</Grid>
147151
{useDsnString ? (
148152
<React.Fragment>
149-
<Grid item xs={12}>
153+
<Grid item xs={12} className={classes.formFieldRow}>
150154
<InputBoxWrapper
151155
id="dsn-string"
152156
name="dsn_string"
@@ -162,7 +166,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
162166
<React.Fragment>
163167
<Grid item xs={12}>
164168
<Grid item xs={12} className={classes.configureString}>
165-
<Grid item xs={12}>
169+
<Grid item xs={12} className={classes.formFieldRow}>
166170
<InputBoxWrapper
167171
id="host"
168172
name="host"
@@ -174,7 +178,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
174178
}}
175179
/>
176180
</Grid>
177-
<Grid item xs={12}>
181+
<Grid item xs={12} className={classes.formFieldRow}>
178182
<InputBoxWrapper
179183
id="db-name"
180184
name="db-name"
@@ -186,7 +190,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
186190
}}
187191
/>
188192
</Grid>
189-
<Grid item xs={12}>
193+
<Grid item xs={12} className={classes.formFieldRow}>
190194
<InputBoxWrapper
191195
id="port"
192196
name="port"
@@ -199,7 +203,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
199203
/>
200204
</Grid>
201205

202-
<Grid item xs={12}>
206+
<Grid item xs={12} className={classes.formFieldRow}>
203207
<InputBoxWrapper
204208
id="user"
205209
name="user"
@@ -211,7 +215,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
211215
}}
212216
/>
213217
</Grid>
214-
<Grid item xs={12}>
218+
<Grid item xs={12} className={classes.formFieldRow}>
215219
<InputBoxWrapper
216220
id="password"
217221
name="password"
@@ -232,7 +236,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
232236
</Grid>
233237
</React.Fragment>
234238
)}
235-
<Grid item xs={12}>
239+
<Grid item xs={12} className={classes.formFieldRow}>
236240
<InputBoxWrapper
237241
id="table"
238242
name="table"
@@ -245,7 +249,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
245249
}}
246250
/>
247251
</Grid>
248-
<Grid item xs={12}>
252+
<Grid item xs={12} className={classes.formFieldRow}>
249253
<RadioGroupSelector
250254
currentSelection={format}
251255
id="format"
@@ -261,7 +265,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
261265
]}
262266
/>
263267
</Grid>
264-
<Grid item xs={12}>
268+
<Grid item xs={12} className={classes.formFieldRow}>
265269
<InputBoxWrapper
266270
id="queue-dir"
267271
name="queue_dir"
@@ -274,7 +278,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
274278
}}
275279
/>
276280
</Grid>
277-
<Grid item xs={12}>
281+
<Grid item xs={12} className={classes.formFieldRow}>
278282
<InputBoxWrapper
279283
id="queue-limit"
280284
name="queue_limit"
@@ -288,7 +292,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
288292
}}
289293
/>
290294
</Grid>
291-
<Grid item xs={12}>
295+
<Grid item xs={12} className={classes.formFieldRow}>
292296
<CommentBoxWrapper
293297
id="comment"
294298
name="comment"

‎portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
2323
import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
2424
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
2525
import { IElementValue } from "../../Configurations/types";
26-
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
26+
import {
27+
formFieldStyles,
28+
modalBasic,
29+
} from "../../Common/FormComponents/common/styleLibrary";
2730
import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
2831
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
2932
import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
@@ -36,6 +39,7 @@ interface IConfPostgresProps {
3639
const styles = (theme: Theme) =>
3740
createStyles({
3841
...modalBasic,
42+
...formFieldStyles,
3943
});
4044

4145
const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
@@ -218,7 +222,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
218222
</Grid>
219223
{useConnectionString ? (
220224
<React.Fragment>
221-
<Grid item xs={12}>
225+
<Grid item xs={12} className={classes.formFieldRow}>
222226
<InputBoxWrapper
223227
id="connection-string"
224228
name="connection_string"
@@ -234,7 +238,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
234238
<React.Fragment>
235239
<Grid item xs={12}>
236240
<Grid item xs={12} className={classes.configureString}>
237-
<Grid item xs={12}>
241+
<Grid item xs={12} className={classes.formFieldRow}>
238242
<InputBoxWrapper
239243
id="host"
240244
name="host"
@@ -246,7 +250,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
246250
}}
247251
/>
248252
</Grid>
249-
<Grid item xs={12}>
253+
<Grid item xs={12} className={classes.formFieldRow}>
250254
<InputBoxWrapper
251255
id="db-name"
252256
name="db-name"
@@ -258,7 +262,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
258262
}}
259263
/>
260264
</Grid>
261-
<Grid item xs={12}>
265+
<Grid item xs={12} className={classes.formFieldRow}>
262266
<InputBoxWrapper
263267
id="port"
264268
name="port"
@@ -270,7 +274,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
270274
}}
271275
/>
272276
</Grid>
273-
<Grid item xs={12}>
277+
<Grid item xs={12} className={classes.formFieldRow}>
274278
<SelectWrapper
275279
value={sslMode}
276280
label=""
@@ -290,7 +294,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
290294
]}
291295
/>
292296
</Grid>
293-
<Grid item xs={12}>
297+
<Grid item xs={12} className={classes.formFieldRow}>
294298
<InputBoxWrapper
295299
id="user"
296300
name="user"
@@ -302,7 +306,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
302306
}}
303307
/>
304308
</Grid>
305-
<Grid item xs={12}>
309+
<Grid item xs={12} className={classes.formFieldRow}>
306310
<InputBoxWrapper
307311
id="password"
308312
name="password"
@@ -326,7 +330,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
326330
</Grid>
327331
</React.Fragment>
328332
)}
329-
<Grid item xs={12}>
333+
<Grid item xs={12} className={classes.formFieldRow}>
330334
<InputBoxWrapper
331335
id="table"
332336
name="table"
@@ -339,7 +343,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
339343
}}
340344
/>
341345
</Grid>
342-
<Grid item xs={12}>
346+
<Grid item xs={12} className={classes.formFieldRow}>
343347
<RadioGroupSelector
344348
currentSelection={format}
345349
id="format"
@@ -355,7 +359,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
355359
]}
356360
/>
357361
</Grid>
358-
<Grid item xs={12}>
362+
<Grid item xs={12} className={classes.formFieldRow}>
359363
<InputBoxWrapper
360364
id="queue-dir"
361365
name="queue_dir"
@@ -368,7 +372,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
368372
}}
369373
/>
370374
</Grid>
371-
<Grid item xs={12}>
375+
<Grid item xs={12} className={classes.formFieldRow}>
372376
<InputBoxWrapper
373377
id="queue-limit"
374378
name="queue_limit"
@@ -382,7 +386,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
382386
}}
383387
/>
384388
</Grid>
385-
<Grid item xs={12}>
389+
<Grid item xs={12} className={classes.formFieldRow}>
386390
<CommentBoxWrapper
387391
id="comment"
388392
name="comment"

0 commit comments

Comments
 (0)