Skip to content

Commit 4769746

Browse files
ajhaiajhai
committed
Use mui for app sharing dialog
1 parent 20cc15a commit 4769746

File tree

1 file changed

+116
-102
lines changed

1 file changed

+116
-102
lines changed

‎client/src/components/apps/AppPublisher.jsx

+116-102
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,20 @@ import React, { useState } from "react";
22
import { profileFlagsState } from "../../data/atoms";
33
import { axios } from "../../data/axios";
44
import { useRecoilValue } from "recoil";
5-
import { message, Modal, Button, Select, Spin } from "antd";
5+
import { enqueueSnackbar } from "notistack";
6+
import {
7+
Button,
8+
CircularProgress,
9+
Dialog,
10+
DialogTitle,
11+
DialogContent,
12+
DialogActions,
13+
FormControl,
14+
InputLabel,
15+
MenuItem,
16+
Select,
17+
TextField,
18+
} from "@mui/material";
619

720
function PublishModalInternal({
821
show,
@@ -90,32 +103,85 @@ function PublishModalInternal({
90103
}
91104
})
92105
.catch((error) => {
93-
message.error(error.response?.data?.message || "Error publishing app");
106+
enqueueSnackbar(
107+
error.response?.data?.message || "Error publishing app",
108+
{
109+
variant: "error",
110+
},
111+
);
94112
})
95113
.finally(() => {
96114
setIsPublishing(false);
97115
});
98116
};
99117

100118
return (
101-
<Modal
102-
title={editSharing ? "App Sharing" : "Publish App"}
103-
open={show}
104-
onOk={() => {
105-
setDone(false);
106-
setShow(false);
107-
}}
108-
onCancel={() => {
109-
setDone(false);
110-
setShow(false);
111-
}}
112-
footer={[
113-
<Button key="back" onClick={() => setShow(false)}>
114-
Cancel
115-
</Button>,
116-
<Button key="submit" type="primary" onClick={publishApp}>
119+
<Dialog open={show} onClose={() => setShow(false)}>
120+
<DialogTitle>{editSharing ? "App Sharing" : "Publish App"}</DialogTitle>
121+
<DialogContent>
122+
{done && <p>App {editSharing ? "saved" : "published"} successfully!</p>}
123+
{!done && (
124+
<div>
125+
<h5>Choose who can access this App</h5>
126+
<FormControl style={{ width: "100%" }}>
127+
<InputLabel id="visibility-label">Visibility</InputLabel>
128+
<Select
129+
labelId="visibility-label"
130+
id="visibility"
131+
value={visibility}
132+
onChange={(e) => setVisibility(e.target.value)}
133+
>
134+
{visibilityOptions.map((option) => (
135+
<MenuItem key={option.value} value={option.value}>
136+
{option.label}
137+
<br />
138+
<small>{option.description}</small>
139+
</MenuItem>
140+
))}
141+
</Select>
142+
</FormControl>
143+
{visibility === 0 && (
144+
<div style={{ marginTop: 10, margin: "auto" }}>
145+
<p>
146+
Select users who can access the app. Only users with given
147+
email addresses will be able to access the app.
148+
</p>
149+
<TextField
150+
label="Enter valid email addresses"
151+
value={accessibleBy}
152+
onChange={(e) => setAccessibleBy(e.target.value)}
153+
style={{ width: "75%" }}
154+
/>
155+
<FormControl style={{ width: "25%" }}>
156+
<InputLabel id="access-permission-label">
157+
Permissions
158+
</InputLabel>
159+
<Select
160+
labelId="access-permission-label"
161+
id="access-permission"
162+
value={accessPermission}
163+
onChange={(e) => setAccessPermission(e.target.value)}
164+
>
165+
{accessPermissionOptions.map((option) => (
166+
<MenuItem key={option.value} value={option.value}>
167+
{option.label}
168+
<br />
169+
<small>{option.description}</small>
170+
</MenuItem>
171+
))}
172+
</Select>
173+
</FormControl>
174+
&nbsp;
175+
</div>
176+
)}
177+
</div>
178+
)}
179+
</DialogContent>
180+
<DialogActions>
181+
<Button onClick={() => setShow(false)}>Cancel</Button>
182+
<Button onClick={publishApp}>
117183
{isPublishing ? (
118-
<Spin />
184+
<CircularProgress />
119185
) : done ? (
120186
<a
121187
href={`/app/${app.published_uuid}`}
@@ -129,60 +195,9 @@ function PublishModalInternal({
129195
) : (
130196
"Publish App"
131197
)}
132-
</Button>,
133-
]}
134-
>
135-
{done && <p>App {editSharing ? "saved" : "published"} successfully!</p>}
136-
{!done && (
137-
<div>
138-
<h5>Choose who can access this App</h5>
139-
<Select
140-
style={{ width: "100%" }}
141-
value={visibility}
142-
onChange={(value) => setVisibility(value)}
143-
>
144-
{visibilityOptions.map((option) => (
145-
<Select.Option key={option.value} value={option.value}>
146-
{option.label}
147-
<br />
148-
<small>{option.description}</small>
149-
</Select.Option>
150-
))}
151-
</Select>
152-
{visibility === 0 && (
153-
<div style={{ marginTop: 10, margin: "auto" }}>
154-
<p>
155-
Select users who can access the app. Only users with given email
156-
addresses will be able to access the app.
157-
</p>
158-
<Select
159-
mode="tags"
160-
style={{ width: "75%" }}
161-
placeholder="Enter valid email addresses"
162-
value={accessibleBy}
163-
onChange={(value) => setAccessibleBy(value)}
164-
notFoundContent={null}
165-
/>
166-
<Select
167-
style={{ width: "25%" }}
168-
placeholder="Select permissions"
169-
value={accessPermission}
170-
onChange={(value) => setAccessPermission(value)}
171-
>
172-
{accessPermissionOptions.map((option) => (
173-
<Select.Option key={option.value} value={option.value}>
174-
{option.label}
175-
<br />
176-
<small>{option.description}</small>
177-
</Select.Option>
178-
))}
179-
</Select>
180-
&nbsp;
181-
</div>
182-
)}
183-
</div>
184-
)}
185-
</Modal>
198+
</Button>
199+
</DialogActions>
200+
</Dialog>
186201
);
187202
}
188203

@@ -242,8 +257,11 @@ export function UnpublishModal({ show, setShow, app, setIsPublished }) {
242257
setDone(true);
243258
})
244259
.catch((error) => {
245-
message.error(
260+
enqueueSnackbar(
246261
error.response?.data?.message || "Error unpublishing app",
262+
{
263+
variant: "error",
264+
},
247265
);
248266
})
249267
.finally(() => {
@@ -252,33 +270,29 @@ export function UnpublishModal({ show, setShow, app, setIsPublished }) {
252270
};
253271

254272
return (
255-
<Modal
256-
title={"Unpublish App"}
257-
open={show}
258-
onOk={() => {
259-
setDone(false);
260-
setShow(false);
261-
}}
262-
onCancel={() => {
263-
setDone(false);
264-
setShow(false);
265-
}}
266-
footer={[
267-
<Button key="back" onClick={() => setShow(false)}>
268-
Cancel
269-
</Button>,
270-
<Button key="submit" type="primary" onClick={unpublishApp}>
271-
{isUnpublishing ? <Spin /> : done ? "Done" : "Yes, Unpublish App"}
272-
</Button>,
273-
]}
274-
>
275-
{done && <p>App unpublished successfully!</p>}
276-
{!done && (
277-
<p>
278-
Are you sure want to unpublish the app? This will make the app
279-
unaccessible to anyone it was already shared with.
280-
</p>
281-
)}
282-
</Modal>
273+
<Dialog open={show} onClose={() => setShow(false)}>
274+
<DialogTitle>Unpublish App</DialogTitle>
275+
<DialogContent>
276+
{done && <p>App unpublished successfully!</p>}
277+
{!done && (
278+
<p>
279+
Are you sure want to unpublish the app? This will make the app
280+
unaccessible to anyone it was already shared with.
281+
</p>
282+
)}
283+
</DialogContent>
284+
<DialogActions>
285+
<Button onClick={() => setShow(false)}>Cancel</Button>
286+
<Button onClick={unpublishApp}>
287+
{isUnpublishing ? (
288+
<CircularProgress />
289+
) : done ? (
290+
"Done"
291+
) : (
292+
"Yes, Unpublish App"
293+
)}
294+
</Button>
295+
</DialogActions>
296+
</Dialog>
283297
);
284298
}

0 commit comments

Comments
 (0)