mirror of
https://github.com/rowyio/rowy.git
synced 2025-12-29 00:16:39 +01:00
Merge branch 'develop' into feat/cloud-logs
* develop: remove components/Table/Settings
This commit is contained in:
Sidney Alcantara
@@ -1,61 +0,0 @@
|
||||
import React from "react";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
|
||||
const options = ["Webhooks", "Rules", "Algolia", "CollectionSync"];
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
|
||||
export default function SettingsMenu({ modal, setModal }) {
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = (option: string) => () => {
|
||||
setModal(option);
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="More"
|
||||
aria-controls="long-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="long-menu"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={open}
|
||||
onClose={handleClose("")}
|
||||
PaperProps={{
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5,
|
||||
width: "20ch",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<MenuItem
|
||||
key={option}
|
||||
value={option}
|
||||
selected={option === modal}
|
||||
onClick={handleClose(option)}
|
||||
disabled={["Rules", "Algolia", "CollectionSync"].includes(option)}
|
||||
>
|
||||
{option}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { makeStyles, createStyles } from "@mui/styles";
|
||||
|
||||
import Button from "@mui/material/Button";
|
||||
import Dialog, { DialogProps } from "@mui/material/Dialog";
|
||||
import DialogActions from "@mui/material/DialogActions";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Select from "@mui/material/Select";
|
||||
import Switch from "@mui/material/Switch";
|
||||
// import CodeEditor from "../editors/CodeEditor";
|
||||
import { useProjectContext } from "@src/contexts/ProjectContext";
|
||||
import { makeId } from "../../../utils/fns";
|
||||
|
||||
const useStyles = makeStyles((theme) =>
|
||||
createStyles({
|
||||
form: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
margin: "auto",
|
||||
width: "fit-content",
|
||||
},
|
||||
formControl: {
|
||||
marginTop: theme.spacing(2),
|
||||
minWidth: 120,
|
||||
},
|
||||
formControlLabel: {
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
enum WebhookTypes {
|
||||
custom = "CUSTOM",
|
||||
typeForm = "TYPE_FORM",
|
||||
}
|
||||
const EmptyState = {
|
||||
enabled: false,
|
||||
type: WebhookTypes.custom,
|
||||
secret: "",
|
||||
customParser: "",
|
||||
};
|
||||
export default function WebhooksDialog({ open, handleClose }) {
|
||||
const classes = useStyles();
|
||||
|
||||
const { tableState, tableActions } = useProjectContext();
|
||||
|
||||
const [state, setState] = useState<{
|
||||
enabled: boolean;
|
||||
type: WebhookTypes;
|
||||
secret: string;
|
||||
customParser: string;
|
||||
}>(EmptyState);
|
||||
const tableFields = Object.keys(tableState?.columns as any);
|
||||
const fullWidth = true;
|
||||
const maxWidth: DialogProps["maxWidth"] = "xl";
|
||||
const handleChange = (key: string) => (value: any) => {
|
||||
setState((s) => ({ ...s, [key]: value }));
|
||||
};
|
||||
const initializeWebhooksConfig = () => {
|
||||
const secret = makeId(32);
|
||||
handleChange("secret")(secret);
|
||||
setState({ ...EmptyState, secret });
|
||||
tableActions?.table.updateConfig("webhooks", {
|
||||
enabled: false,
|
||||
type: WebhookTypes.custom,
|
||||
secret,
|
||||
customParser: "", // TODO: add a boilerplate/example
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (
|
||||
tableState &&
|
||||
!tableState.config.tableConfig.loading &&
|
||||
!tableState?.config.webhooks &&
|
||||
!state.secret
|
||||
) {
|
||||
initializeWebhooksConfig();
|
||||
} else if (tableState?.config.webhooks) {
|
||||
setState({ ...tableState?.config.webhooks });
|
||||
}
|
||||
}, [tableState?.config]);
|
||||
|
||||
const handleWebhookTypeChange = (
|
||||
event: React.ChangeEvent<{ value: unknown }>
|
||||
) => {
|
||||
handleChange("type")(event.target.value as WebhookTypes);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
handleClose();
|
||||
await tableActions?.table.updateConfig("webhooks", {
|
||||
...state,
|
||||
});
|
||||
};
|
||||
const handleCancel = () => {
|
||||
handleClose();
|
||||
setState({ ...tableState?.config.webhooks });
|
||||
};
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Dialog
|
||||
fullWidth={fullWidth}
|
||||
maxWidth={maxWidth}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="max-width-dialog-title"
|
||||
>
|
||||
<DialogTitle id="max-width-dialog-title">Webhooks</DialogTitle>
|
||||
<DialogContent>
|
||||
<FormControl className={classes.formControl}>
|
||||
<FormControlLabel
|
||||
control={<Switch />}
|
||||
label={"Enable webhooks for this table"}
|
||||
labelPlacement="end"
|
||||
checked={state.enabled}
|
||||
onChange={() => {
|
||||
handleChange("enabled")(!state.enabled);
|
||||
}}
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiFormControlLabel-label": { mt: 0 },
|
||||
}}
|
||||
// classes={{ root: classes.formControlLabel, label: classes.label }}
|
||||
/>
|
||||
<InputLabel htmlFor="webhook-type">Webhook type</InputLabel>
|
||||
<Select
|
||||
autoFocus
|
||||
value={state.type}
|
||||
onChange={handleWebhookTypeChange as any}
|
||||
inputProps={{
|
||||
name: "webhook-type",
|
||||
id: "webhook-type",
|
||||
}}
|
||||
>
|
||||
<MenuItem value={WebhookTypes.typeForm}>Typeform</MenuItem>
|
||||
<MenuItem value={WebhookTypes.custom}>Custom</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{/* {state.type === WebhookTypes.custom && (
|
||||
<CodeEditor
|
||||
script={state.customParser}
|
||||
handleChange={handleChange("customParser")}
|
||||
/>
|
||||
)} */}
|
||||
<br />
|
||||
{state.type === WebhookTypes.typeForm && (
|
||||
<>
|
||||
<Typography variant="overline">Web hook url:</Typography>
|
||||
<Typography variant="body1">
|
||||
{/* {WEBHOOK_URL}?tablePath={tableState?.tablePath}
|
||||
&type=TYPE_FORM&secret={state.secret} */}
|
||||
</Typography>
|
||||
<Typography variant="overline">instructions:</Typography>
|
||||
<Typography variant="body1">
|
||||
please set the question reference in typeform to the following
|
||||
field keys :{" "}
|
||||
{tableFields.map((key) => (
|
||||
<>
|
||||
{" "}
|
||||
<b key={key}>{key}</b>,
|
||||
</>
|
||||
))}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleSave} color="primary">
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={handleCancel} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import SettingsMenu from "./Menu";
|
||||
//import Webhooks from "./Webhooks";
|
||||
export default function Settings() {
|
||||
const [modal, setModal] = useState("");
|
||||
return (
|
||||
<>
|
||||
<SettingsMenu modal={modal} setModal={setModal} />
|
||||
{/* <Webhooks
|
||||
open={modal === "Webhooks"}
|
||||
handleClose={() => {
|
||||
setModal("");
|
||||
}}
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user