@material-ui/core#DialogActions TypeScript Examples

export function DeleteDialog(props: Props) {
  const { t } = useTranslation();
  const note = props.note;

  const deleteNote = useCallback((note: Note) => {
    vscode.postMessage({
      action: MessageAction.DeleteNote,
      data: note,
    });
  }, []);

  return (
    <Dialog open={props.open} onClose={props.onClose}>
      <DialogTitle>{t("delete-file-dialog/title")}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          {t("delete-file-dialog/subtitle")}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
          style={{ color: "red" }}
          onClick={() => {
            deleteNote(note);
            props.onClose();
          }}
        >
          {t("general/Delete")}
        </Button>
        <Button onClick={props.onClose}>{t("general/cancel")}</Button>
      </DialogActions>
    </Dialog>
  );
}

_Dialog = ({ open, title, body, actions, onClose }: { open: boolean, title?: string, body?: string, actions: Action[], onClose: () => void }) => {
	if (open) {
		return (
			<Dialog onClose={onClose} open={open} maxWidth='md'>
				<div style={{ minWidth: '280px' }}>
					<DialogTitle>
						{title}
					</DialogTitle>
					{body && <DialogContent dividers>
						{body}
					</DialogContent>}
					<DialogActions>
						{actions.map((action, index) => {
							return (
								<Button key={index} variant={action.variant} color={action.color} autoFocus={action.autoFocus} onClick={() => {
									onClose()
									if (action.handler) {
										action.handler()
									}
								}}>
									{action.title}
								</Button>
							)
						})
						}
					</DialogActions>
				</div>
			</Dialog>
		)
	}
	return <></>
}

export function Component({
  closeDialog,
  title,
  description,
  agree = 'Agree',
}: DialogProps<AlertParams, FormReturn>) {
  const classes = useAlertStyles();

  return (
    <Dialog
      open
      classes={classes}
      onClose={() => closeDialog()}
      disableBackdropClick
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      style={{ padding: 100 }}
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}

      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {description}
        </DialogContentText>
      </DialogContent>

      <DialogActions>
        <ActionButton
          autoFocus
          style={{ width: '100%' }}
          onClick={() => closeDialog()}
        >
          {agree}
        </ActionButton>
      </DialogActions>
    </Dialog>
  );
}

export default function (props: { renderError: RenderError }): JSX.Element {
  const classes = useStyles()
  return (
    <div className={classes.root}>
      <Dialog open={true} maxWidth={false}>
        <DialogTitle disableTypography>
          <Typography variant='h5'>Oops! Something went wrong...</Typography>
        </DialogTitle>
        <DialogContent className={classes.dialogContent}>
          <img
            src='/img/hippo-with-turtle.jpg'
            alt={`"hippo" by .wilkie is licensed with CC BY-NC-SA 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/2.0/`}
          />
          <pre className={classes.pre}>{props.renderError.error.stack || props.renderError.error.message}</pre>
        </DialogContent>
        <DialogActions>
          <Button component={'a'} href='/'>
            Go home
          </Button>
          <Button onClick={props.renderError.clear} color='primary'>
            Try again
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

render() {
    return (
      <Dialog
        open={this.props.show}
        onClose={this.props.dismiss}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {this.props.confirmation}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              this.props.cancel();
            }}
            color="secondary"
          >
            {this.props.cancelLabel}
          </Button>
          <Button
            onClick={() => {
              this.props.proceed();
            }}
            color="primary"
            autoFocus
          >
            {this.props.proceedLabel}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

EnableOverclockingDialog: React.FC<EnableOverclockingDialogProps> = ({ onClose, open }) => {
    const classes = useStyles();

    const handleCancel = () => { onClose(false) }
    const handleOk = () => { onClose(true) }

    return (
        <Dialog
            disableBackdropClick
            disableEscapeKeyDown
            maxWidth="xs"
            aria-labelledby="confirmation-dialog-title"
            open={open}>
            <DialogTitle id="confirmation-dialog-title">
                <Typography variant="h5" className={classes.iconHeader}>
                    <WarningIcon />  Overclocking warning
	      </Typography>
            </DialogTitle>
            <DialogContent>
                <Typography>
                    It is recommended that you save any important data before using this tool. Operating your Raspberry Pi outside of official Raspberry Pi specifications or outside factory settings, including the conducting of overclocking, may damage your system components and lead to system instabilities. <br /> <br /> Cooler Master does not provide support or service for issues or damages related to use of the system components outside of official specifications or factory settings. You may also not receive support from your board or system manufacturer.
		</Typography>
            </DialogContent>
            <DialogActions>
                <Button autoFocus onClick={handleCancel} color="primary" variant="contained">
                    Cancel
	    </Button>
                <Button onClick={handleOk} color="primary" variant="contained">
                    Ok
	    </Button>
            </DialogActions>
        </Dialog>
    )
}

Confirmation = (props: IConfirmationProps) => {
  const classes = useStyles();

  return (
    <div>
      <Dialog open={props.isOpen} onClose={props.onClose}>
        <DialogTitle>{props.title}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">{props.message}</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={props.onNegativeButtonClick} className={classes.successButton}>
            {props.negativeButton}
          </Button>
          <Button onClick={props.onPositiveButtonClick} color="secondary" autoFocus>
            {props.positiveButton}
          </Button>
        </DialogActions>
      </Dialog>
    </div >
  );
}

WindowsOnboardingDialog: React.FC<WindowsOnboardingDialogProps> = props => (
    <Dialog open={props.show} style={{ userSelect: 'none' }}>
        <DialogTitle>Welcome to SpaceEye!</DialogTitle>
        <DialogContent>
            <DialogContentText>
                To make sure the app icon is always visible in your taskbar, click the button below
                and select &quot;Show icon and notifications&quot; for &quot;SpaceEye&quot;.
            </DialogContentText>
            <DialogContentText>
                You can do this later by Windows searching for &quot;Select which icons appear on
                the taskbar&quot;
            </DialogContentText>
        </DialogContent>
        <DialogActions>
            <Button onClick={props.onDone}>Done</Button>
            <Button color="primary" onClick={props.onOpenSettings}>
                Open Icon Settings
            </Button>
        </DialogActions>
    </Dialog>
)

BaseModal: React.FunctionComponent<IProps> = ({
  open,
  title,
  submitButtonText,
  content,
  onSubmit,
  onCancel,
}) => {
  return (
    <Dialog
      open={open}
      onClose={onCancel}
      aria-labelledby="form-dialog-title"
      fullWidth
    >
      <DialogTitle id="form-dialog-title">{title}</DialogTitle>
      <ValidatorForm onSubmit={onSubmit} instantValidate>
        <DialogContent>{content}</DialogContent>
        <DialogActions>
          <Button onClick={onCancel} color="primary">
            Cancel
          </Button>
          <Button type="submit" color="primary">
            {submitButtonText}
          </Button>
        </DialogActions>
      </ValidatorForm>
    </Dialog>
  );
}

export default function ConfirmationDialog({
  open,
  onClose,
  title,
  message,
  onPositiveAction,
  onNegativeAction,
  positionText = 'Yes',
  negativeText = 'No',
}: Props): ReactElement {
  const classes = useStyles();
  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onPositiveAction} color="primary">
          {positionText}
        </Button>
        <Button onClick={onNegativeAction} color="primary" autoFocus>
          {negativeText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

UnregisterEntityDialog = (props: UnregisterEntityDialogProps) => {
  const { open, onConfirm, onClose, entity } = props;
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle id="responsive-dialog-title">
        Are you sure you want to unregister this entity?
      </DialogTitle>
      <DialogContent>
        <Contents entity={entity} onConfirm={onConfirm} />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
    return (
      <Dialog
        open={!!this.state.solved}
        scroll='body'
        PaperProps={{
          style: {
            width: 'fit-content',
            marginLeft: 'auto',
            marginRight: 'auto',
          },
        }}
      >
        <DialogTitle>Make sure you are human</DialogTitle>
        <DialogContent>
          <DialogContentText>Complete captcha challenge below to continue</DialogContentText>
          {this.state.sitekey && (
            <ReCAPTCHA
              ref={this.recaptchaRef}
              sitekey={this.state.sitekey}
              onChange={result => this.recaptchaOnChange(result)}
            />
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.setState({ solved: undefined, sitekey: undefined })}>Cancel</Button>
        </DialogActions>
      </Dialog>
    );
  }

SettingsDialog = () => {
  const { settingsDialog } = useAppState()
  const { hideSettings } = useActions()
  return (
    <Dialog open={!!settingsDialog} fullWidth onClose={hideSettings}>
      <DialogTitle>Settings</DialogTitle>
      <DialogContent style={{ gap: '1rem', display: 'flex' }}>
        <Editor
          label="Deploy timeout (secs)"
          selector={(state) => state.appSettings.deployTimeoutSecs}
        />
        <Editor
          label="Status refresh interval (secs)"
          selector={(state) => state.appSettings.refreshIntervalSecs}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={hideSettings}>Close</Button>
      </DialogActions>
    </Dialog>
  )
}

DeleteConfirm = ({ open, close, yes }: Props) => {
  const matches = useMediaQuery("(max-width: 768px)");
  return (
    <Dialog open={open} onClose={close}>
      <DialogTitle>DELETE ITEM?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Are you sure you want to delete this item?
        </DialogContentText>
        <div style={{ display: matches ? "none" : "block" }}>
          <Divider />
          <br />
          <DialogContentText>
            <span style={{ color: "green", fontWeight: "bold" }}>PROTIP:</span>
            <br />
            You can hold down shift when clicking the <b>delete button</b> to
            bypass this confirmation entirely
          </DialogContentText>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={close} color="primary">
          No
        </Button>
        <Button onClick={yes} color="primary" variant="contained">
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
}

useDialogConfirm = (): [React.FC<DialogConfirmProps>, SetMessage, () => void] => {
  const { t } =  useTranslation();
  const [msg, showMessage] = useState({
    title: '',
    content: '',
    show: false
  } as message);
  const closeDialog = (callback?: () => any) => {
    showMessage({ ...msg, show: false });
    callback && callback();
  };
  const showDialog = (title: string, content: string) => {
    showMessage({ title, content, show: true });
  };

  return [
    ((props) =>
      (<AdaptiveDialog open={msg.show} onClose={() => closeDialog(props.onClose)}>
        <DialogTitle>{msg.title}</DialogTitle>
        <DialogContent>
          <DialogContentText>{msg.content}</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => closeDialog(props.onConfirm)} color="primary">
            {t('ok')}
          </Button>
          <Button onClick={() => closeDialog(props.onClose)} autoFocus>
            {t('cancel')}
          </Button>
        </DialogActions>
      </AdaptiveDialog>)
    ),
    showDialog,
    closeDialog
  ];
}

export default function ApiKeyDialog() {
    const dispatch = useDispatch();

    const apiKey = useSelector(selectApiKey);
    const apiKeyDialogOpen = useSelector(selectApiKeyDialogVisible);
    const handleApiKeyDialogClose = () => {
        dispatch(toggleApiKeyDialog(false));
    };

    const classes = useStyles();

    return <Dialog open={apiKeyDialogOpen} onClose={handleApiKeyDialogClose} aria-labelledby="api-key-form-dialog-title">
        <DialogTitle id="api-key-form-dialog-title">API Key</DialogTitle>
        <DialogContent>
            <DialogContentText>
                Please provide your OpenAI API Key. We only store this key locally and never send it to our servers.
            </DialogContentText>
            <TextField
                className={classes.apiKeyInput}
                autoFocus
                margin="dense"
                id="name"
                label="API Key"
                type="text"
                value={apiKey}
                fullWidth
                onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
                    dispatch(editApiKey(event.currentTarget.value));
                }}
            />
        </DialogContent>
        <DialogActions>
            <Button onClick={handleApiKeyDialogClose} color="primary">
                Done
            </Button>
        </DialogActions>
    </Dialog>;
}

MessageDialog = () => {
    const { messageState, resolveMessage } = useAppState();
    const classes = useStyles();
    return (
        <>
            {messageState.messageActive && (
                <>
                    <Dialog open={messageState.messageActive} onClose={resolveMessage}>
                        {messageState.messageType === "Info" ? (
                            <Avatar className={classes.avatarForInformation}>
                                <Info />
                            </Avatar>
                        ) : (
                            <Avatar className={classes.avatarForException}>
                                <ErrorOutline />
                            </Avatar>
                        )}
                        <DialogTitle>{messageState.messageTitle}</DialogTitle>
                        <DialogContent>
                            {messageState.messageDetail.map((d, i) => {
                                return <DialogContentText key={i}>{d}</DialogContentText>;
                            })}
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={resolveMessage} color="primary">
                                OK
                            </Button>
                        </DialogActions>
                    </Dialog>
                </>
            )}
        </>
    );
}

export function Component({
  closeDialog,
  title,
  description,
  agree = 'Agree',
  disagree = 'Disagree',
}: DialogProps<ConfirmParams, boolean>) {
  const classes = useAlertStyles();

  return (
    <Dialog
      open
      classes={classes}
      onClose={() => closeDialog(false)}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}

      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {description}
        </DialogContentText>
      </DialogContent>

      <DialogActions>
        <ActionButton style={{ width: 150 }} onClick={() => closeDialog(false)}>
          {disagree}
        </ActionButton>
        <ActionButton
          autoFocus
          style={{ width: 150 }}
          onClick={() => closeDialog(true)}
        >
          {agree}
        </ActionButton>
      </DialogActions>
    </Dialog>
  );
}

SignMessage = () => {
    const [textFieldValue, setTextFieldValue] = useState<string>("");
    const [modalBody, setModalBody] = useState<string>("");
    const [modalOpen, setModalOpen] = useState<boolean>(false);

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setTextFieldValue(event.target.value);
      };

    const onSubmit = async () => {
        if(textFieldValue) {
            const extension = await getInjectedMetamaskExtension();
            if(extension && extension.signer && extension.signer.signRaw) {

                const messageAsHex = stringToHex(textFieldValue);
                const address = (await web3Accounts())[0].address

                const messageSignResponse = await extension.signer.signRaw({
                    data: messageAsHex,
                    address: address,
                    type: "bytes"
                });
                setTextFieldValue("");
                setModalBody(messageSignResponse.signature);
                setModalOpen(true);
            }
        }
    }

    return (
        <Card style={{height: "100%"}}>
            <CardHeader title="Sign custom message"/>
            <CardContent>
                <Grid container>
                    <TextField 
                    onChange={handleChange} 
                    value={textFieldValue} 
                    size="medium" 
                    fullWidth 
                    id="recipient" 
                    label="Message" 
                    variant="outlined" 
                    />
                </Grid>
                <Box m="0.5rem" />
                <Grid container justify="flex-end">
                    <Button onClick={onSubmit} color="secondary" variant="contained" size="large">Sign</Button>
                </Grid>
            </CardContent>
            <Dialog
                open={modalOpen}
                onClose={() => setModalOpen(false)}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">{"Message signature"}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        This is signature of your message:<br/>
                        <Typography style={{ wordWrap: "break-word" }}>{modalBody}</Typography>
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setModalOpen(false)} color="primary" autoFocus>
                        OK
                    </Button>
                </DialogActions>
            </Dialog>
        </Card>
    );
}

function NewCommentDialog(props) {
  const [open, setOpen] = useState(true);
  const [comment, setComment] = useState('');

  const handleCloseCancel = () => {
    setOpen(false);
  };

  const handleCloseSend = () => {
    setOpen(false);
    const lineNumber = props.selection.start.line;
    newDetachedCommentThread(
      props.currFilePath,
      props.serverRoot,
      comment,
      lineNumber
    );
  };

  return (
    <div>
      <Dialog
        open={open}
        onClose={handleCloseCancel}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add a comment</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            multiline
            margin="dense"
            rows={3}
            value={comment}
            variant="outlined"
            size="medium"
            label="Start a new comment thread"
            onChange={e => setComment(e.target.value)}
            style={style.textField}
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleCloseSend} color="primary">
            Send
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

ClearEditorDataPopup: FunctionComponent<ClearEditorDataPopupProps> = ({
  trigger,
  onConfirm,
}) => {
  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
  const classes = useStyles();

  const openDialog = useCallback(() => {
    setIsDialogOpen(true);
  }, []);

  const closeDialog = useCallback(() => {
    setIsDialogOpen(false);
  }, []);

  const finishDialog = useCallback(() => {
    onConfirm();
    closeDialog();
  }, []);

  return (
    <>
      {cloneElement(trigger, {
        className: classes.button,
        onClick: openDialog,
      })}
      <Dialog PaperProps={{ className: classes.dialog }} open={isDialogOpen} onClose={closeDialog}>
        <DialogTitle onClose={closeDialog}>{t('map-ui:clear-editor-data')}</DialogTitle>
        <DialogContent>
          <DialogContentText> {t('map-ui:clear-editor-data-content')}</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            variant="contained"
            size="large"
            aria-label={t('cancel')}
            tabIndex={0}
            onClick={closeDialog}
          >
            {t('cancel')}
          </Button>
          <Button
            variant="contained"
            size="large"
            color="primary"
            aria-label={t('confirm')}
            tabIndex={0}
            onClick={finishDialog}
            onKeyDown={finishDialog}
          >
            {t('confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

Dialog = ({
  open,
  header,
  content,
  actions,
  error,
  onClose,
  classes,
}: DialogProps) => {
  const ActionButton = ({
    text,
    color,
    variant,
    size,
    disabled,
    loading,
    action,
  }: Action) => (
    <Button
      key={text}
      color={color}
      variant={variant}
      size={size}
      disabled={disabled}
      onClick={action}
    >
      {loading ? (
        <CircularProgress className={classes.loading} size={24} />
      ) : (
        text
      )}
    </Button>
  );

  return (
    <MuiDialog fullWidth onClose={onClose} open={open}>
      {header && (
        <DialogTitle disableTypography className={classes.dialogTitle}>
          <Typography variant="h4">{header}</Typography>
        </DialogTitle>
      )}
      {error && <Alert severity="error">{error}</Alert>}
      <DialogContent dividers>{content}</DialogContent>
      <DialogActions>
        {actions &&
          actions.map((action) => {
            if (action.link) {
              return (
                <Link
                  key={action.text}
                  style={{ color: "inherit", textDecoration: "none" }}
                  to={action.link}
                >
                  {ActionButton(action)}
                </Link>
              );
            }
            return ActionButton(action);
          })}
      </DialogActions>
    </MuiDialog>
  );
}

EntityBadgesDialog = ({ open, onClose }: Props) => {
  const theme = useTheme();
  const { entity } = useAsyncEntity();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const badgesApi = useApi(badgesApiRef);

  const {
    value: badges,
    loading,
    error,
  } = useAsync(async () => {
    if (open && entity) {
      return await badgesApi.getEntityBadgeSpecs(entity);
    }
    return [];
  }, [badgesApi, entity, open]);

  const content = (badges || []).map(
    ({ badge: { description }, id, url, markdown }) => (
      <Box marginTop={4} key={id}>
        <DialogContentText component="div">
          <img alt={description || id} src={url} />
          <CodeSnippet language="markdown" text={markdown} showCopyCodeButton />
        </DialogContentText>
      </Box>
    ),
  );

  return (
    <Dialog fullScreen={fullScreen} open={open} onClose={onClose}>
      <DialogTitle>Entity Badges</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Embed badges in other web sites that link back to this entity. Copy
          the relevant snippet of Markdown code to use the badge.
        </DialogContentText>

        {loading && <Progress />}
        {error && <ResponseErrorPanel error={error} />}

        {content}
      </DialogContent>

      <DialogActions>
        <Button onClick={onClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

CrowdInInlineEditing = () => {
  const [crowdInLoaded, setCrowdInLoaded] = useState<boolean>();
  const [contributeSelected, setContributeSelected] = useState<boolean>();
  const { i18n } = useTranslation();
  useEffect(() => {
    i18n.on('languageChanged', lng => {
      setContributeSelected(!!supportedLanguages.find(l => l.code === lng)?.isContribute);
    });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  if (!!contributeSelected && !crowdInLoaded) {
    const onClose = () => i18n.changeLanguage(defaultLanguage);
    return (
      <Dialog
        open
        onClose={onClose}
      >
        <DialogTitle>Open language editor</DialogTitle>
        <DialogContent>
          <DialogContentText>We use CrowdIn to help you translate text directly on our site.</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose}>Cancel</Button>
          <Button
            color='primary'
            onClick={() => {
              if (!!crowdInLoaded || !!windowIso.isSsr) return;
              setCrowdInLoaded(true);
              windowIso['_jipt'] = [['project', 'clearflask']];
              const d = windowIso.document;
              var s = d.createElement('script');
              s.type = 'text/javascript';
              s.src = '//cdn.crowdin.com/jipt/jipt.js';
              const x = d.getElementsByTagName('script')[0];
              x.parentNode?.insertBefore(s, x);
            }}>Continue</Button>
        </DialogActions>
      </Dialog>
    );
  }

  return null;
}

InfoAlert = ({
  showAlert,
  okClicked,
  title,
  modalClose,
  children,
}: React.PropsWithChildren<NavigateAwayProps>) => {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    setOpen(showAlert);
  }, [showAlert]);

  const handleOk = () => {
    okClicked();
    setOpen(false);
    trackUiClick(title, 'Ok');
  };
  const handleClose = () => {
    modalClose();
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {children}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleOk} color="primary">
          Ok
        </Button>
      </DialogActions>
    </Dialog>
  );
}

LoginDialog: LoginDialogType & React.FC<LoginDialogProps> = (props) => {
	const { callback } = props

	const [dialogVisible, setDialogVisible] = useState(true)
	const [response, setResponse] = useState<LoginDialogResponse>({ name: "" })

	const classes = useStyles()

	const handleConfirm = () => {
		if (!response.name) {
			return
		}

		setDialogVisible(false)

		callback(response)
	}

	const handleSubmit = (event: React.FormEvent) => {
		event.preventDefault()

		handleConfirm()
	}

	const handleChange = (key: keyof LoginDialogResponse, value: LoginDialogResponse[keyof LoginDialogResponse]) => {
		setResponse(lastState => ({
			...lastState,
			[key]: value,
		}))
	}

	return (
		<ThemeProvider theme={theme}>
			<Dialog
				open={dialogVisible}
				style={{
					zIndex: 999999,
				}}
			>
				<form
					onSubmit={handleSubmit}
					className={classes.form}
				>
					<DialogTitle>Login</DialogTitle>

					<img
						src={logoImage}
						alt="logo"
						className={classes.logo}
					/>

					<DialogContent>
						<DialogContentText color="textPrimary">
							You have to choose a name in order to play this game.
						</DialogContentText>
						<TextField
							autoFocus
							required
							margin="dense"
							label="Name"
							value={response.name}
							onChange={({ target }) => handleChange("name", target.value)}
							fullWidth
						/>
					</DialogContent>
					<DialogActions>
						<Button
							onClick={handleConfirm}
							variant="contained"
							color="primary"
							type="submit"
						>
							Confirm
						</Button>
					</DialogActions>
				</form>
			</Dialog>
		</ThemeProvider>
	)
}

NewBoardDialog = () => {
  const dispatch = useDispatch();
  const error = useSelector((state: RootState) => state.board.createError);
  const open = useSelector((state: RootState) => state.board.createDialogOpen);
  const { register, handleSubmit, errors, reset } = useForm<FormData>();

  const handleOpen = () => {
    reset();
    dispatch(setCreateDialogOpen(true));
  };

  const handleClose = () => {
    dispatch(setCreateDialogOpen(false));
  };

  const onSubmit = handleSubmit(({ name }) => {
    dispatch(createBoard(name));
  });

  return (
    <div>
      <Button css={openBtnStyles} onClick={handleOpen}>
        Create new board
        <br />({getMetaKey()}+B)
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="new-board"
        fullWidth
        maxWidth="xs"
      >
        <DialogTitle id="new-board-title">New board</DialogTitle>
        <form onSubmit={onSubmit}>
          <DialogContent>
            <DialogContentText>
              Create a new private board. Only members of the board will be able
              to see and edit it.
            </DialogContentText>
            {error && <Alert severity="error">{error}</Alert>}
            <TextField
              autoFocus
              margin="dense"
              id="board-name"
              label="Board name"
              fullWidth
              name="name"
              inputRef={register({
                required: "This field is required",
                maxLength: {
                  value: 50,
                  message: "This field can't be more than 50 chars long.",
                },
              })}
              helperText={errors.name?.message}
              error={Boolean(errors.name)}
            />
          </DialogContent>
          <DialogActions>
            <Button
              onClick={onSubmit}
              color="primary"
              data-testid="create-board-btn"
            >
              Create Board
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    </div>
  );
}

DetailsDialogActions: typeof DialogActions = styled(DialogActions)({
    padding: '20px !important'
})

export default function TemplateDialog() {
    const dispatch = useDispatch();
    const classes = useStyles();

    const templateDialogOpen = useSelector(selectTemplateDialogVisible);
    const handleTemplateDialogClose = () => {
        dispatch(toggleTemplateDialog(false));
    };

    const templateGroups = getTemplateGroups();
    const handleLoadTemplate = (template: Template) => () => {
        dispatch(loadTemplate(template.actionPayload))
        dispatch(cleanExampleList());
        handleTemplateDialogClose();
    };

    return <Dialog
        open={templateDialogOpen}
        onClose={handleTemplateDialogClose}
        aria-labelledby="template-dialog-title"
    >
        <DialogTitle id="template-dialog-title">Load Template</DialogTitle>
        <DialogContent
            className={classes.templateDialog}
        >
            {templateGroups.map((templateGroup, ind) => (
                <div key={ind}>
                    <List subheader={<ListSubheader className={classes.templateGroupHeader}>{templateGroup.name}</ListSubheader>}>
                        {templateGroup.templates.map(template => (
                            <ListItem key={template.id} button
                                      onClick={handleLoadTemplate(template)}><ListItemText>{template.name}</ListItemText></ListItem>
                        ))}
                    </List>
                </div>
            ))}

        </DialogContent>
        <DialogActions>
            <Button onClick={handleTemplateDialogClose} color="primary">
                Close
            </Button>
        </DialogActions>
    </Dialog>;
}