@material-ui/core#DialogContentText 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>
  );
}

ExportDataPopup: FunctionComponent<ExportDataPopupProps> = ({
  title,
  message,
  fetchData,
  trigger,
}) => {
  const [data, setData] = useState<string>('');
  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
  const classes = useStyles();

  // When the popup opens, update the contents.
  const performOpen = () => {
    setData(fetchData());
  };

  const onOpen = useCallback(() => setIsDialogOpen(true), []);
  const onClose = useCallback(() => setIsDialogOpen(false), []);

  return (
    <div>
      {cloneElement(trigger, { onClick: onOpen })}
      <Dialog
        PaperProps={{ className: classes.dialog }}
        open={isDialogOpen}
        onEntering={performOpen}
        fullWidth
        maxWidth="lg"
        onClose={onClose}
      >
        <DialogTitle onClose={onClose}>{title}</DialogTitle>
        <DialogContent>
          <DialogContentText>{message}</DialogContentText>
          <CopyTextArea text={data} rows={4} />
        </DialogContent>
      </Dialog>
    </div>
  );
}

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 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>
  );
}

export function AncestryPage(props: { entity: Entity }) {
  const { loading, error, nodes, edges } = useAncestry(props.entity);
  if (loading) {
    return <Progress />;
  } else if (error) {
    return <ResponseErrorPanel error={error} />;
  }

  return (
    <>
      <DialogContentText variant="h2">Ancestry</DialogContentText>
      <DialogContentText gutterBottom>
        This is the ancestry of entities above the current one - as in, the
        chain(s) of entities down to the current one, where{' '}
        <Link to="https://backstage.io/docs/features/software-catalog/life-of-an-entity">
          processors emitted
        </Link>{' '}
        child entities that ultimately led to the current one existing. Note
        that this is a completely different mechanism from relations.
      </DialogContentText>
      <Box mt={4}>
        <DependencyGraph
          nodes={nodes}
          edges={edges}
          renderNode={CustomNode}
          direction={DependencyGraphTypes.Direction.BOTTOM_TOP}
          zoom="enable-on-click"
        />
      </Box>
    </>
  );
}

export function Content({ children }: Props): JSX.Element {
  const classes = useStyles();

  return (
    <DialogContent classes={{ root: classes.MuiDialogContent }}>
      <DialogContentText classes={{ root: classes.MuiTypography }}>
        {children}
      </DialogContentText>
    </DialogContent>
  );
}

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>
    );
  }

ConfirmDialog = ({ isOpen, onResolve, message }: ConfirmDialogProps) => {
  return (
    <Dialog open={isOpen} onClose={() => onResolve(false)}>
      <DialogContent>
        <DialogContentText>{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
          variant="contained"
          color="primary"
          autoFocus
          onClick={() => onResolve(true)}>
          Ok
        </Button>
        <Button onClick={() => onResolve(false)}>Cancel</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
  ];
}

HelpDialog = ({ helpText, title }: Props) => {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

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

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        INFO
      </Button>
      <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"
            dangerouslySetInnerHTML={{ __html: helpText }}
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}

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>
                </>
            )}
        </>
    );
}

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>
)

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>
    );
  }

IntroductionMac: OnboardingPage = props => {
    return (
        <>
            <DialogTitle>Welcome to SpaceEye!</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    Once you select a view, SpaceEye runs in the background, continually updating to
                    the latest imagery.
                </DialogContentText>
                <DialogContentText>
                    To access this window, click the globe icon in your menu bar, as shown below:
                </DialogContentText>
                <div style={{ textAlign: 'center' }}>
                    <MenubarImg src={macosMenubar} />
                </div>
                <div style={{ textAlign: 'center' }}>
                    <Button variant="contained" color="primary" onClick={props.next}>
                        Got it!
                    </Button>
                </div>
            </DialogContent>
        </>
    )
}

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 >
  );
}

renderButtonDiscard(
    SubmitButtonProps?: Partial<React.ComponentProps<typeof SubmitButton>>,
  ): React.ReactNode | null {
    if (!this.props.onDiscarded) return null;

    return (
      <>
        <Button
          variant='text'
          color='inherit'
          className={classNames(!!this.props.draftId && this.props.classes.buttonDiscardRed)}
          disabled={this.state.isSubmitting}
          onClick={e => {
            if (!this.props.draftId) {
              // If not a draft, discard without prompt
              this.discard();
            } else {
              this.setState({ discardDraftDialogOpen: true });
            }
          }}
          {...SubmitButtonProps}
        >
          {!!this.props.draftId ? 'Discard' : 'Cancel'}
        </Button>
        <Dialog
          open={!!this.state.discardDraftDialogOpen}
          onClose={() => this.setState({ discardDraftDialogOpen: false })}
        >
          <DialogTitle>Delete draft</DialogTitle>
          <DialogContent>
            <DialogContentText>Are you sure you want to permanently delete this draft?</DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => this.setState({ discardDraftDialogOpen: false })}
            >Cancel</Button>
            <SubmitButton
              variant='text'
              color='inherit'
              className={this.props.classes.buttonDiscardRed}
              isSubmitting={this.state.isSubmitting}
              onClick={e => {
                this.discard(this.props.draftId);
                this.setState({ discardDraftDialogOpen: false });
              }}
            >
              Discard
            </SubmitButton>
          </DialogActions>
        </Dialog>
      </>
    );
  }

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>
    </>
  );
}

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>
  );
}

render(): React.ReactElement {
    return (
      <div className={classes(logDisplayClass)}>
        <Tabs
          value={this.state.value}
          variant="fullWidth"
          indicatorColor="primary"
          textColor="primary"
          onChange={(event, value) => this._onChange(event, value)}
        >
          <Tab label="Sync Log" className={classes(logDisplayTabClass)} />
          <Tab
            label="Conflicts"
            className={classes(logDisplayTabClass)}
            disabled={!this.state.conflict}
          />
        </Tabs>
        <SyncLog service={this.props.service} ref={this.SyncLogElement} />
        <ConflictList
          service={this.props.service}
          ref={this.ConflictListElement}
        />

        <Dialog
          open={this.state.dialog.open}
          onClose={() => this._onClose()}
          fullWidth
        >
          <DialogTitle>File Conflicts</DialogTitle>
          <DialogContent>
            <DialogContentText>{this.state.dialog.msg} </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => this._onClose()} color="primary">
              Cancel
            </Button>
            <Button onClick={() => this._onView()} color="primary" autoFocus>
              View Files
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }

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>
	)
}

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>
    );
}

ThresholdsDialog = ({
  thresholds,
  setThresholds,
  handleClose,
  open,
}: ThresholdsDialogProps) => {
  // Maintain local state with threshold value in order to control sliders without affecting debouncing
  const [durThres, setDurThres] = useState(thresholds.percentDuration);
  const [accThres, setAccThres] = useState(thresholds.percentDuration);

  const handlePercentChange = (_, newVal: number | number[]) => {
    if (Array.isArray(newVal)) return;
    setDurThres(newVal);
    updateThresholds(setThresholds, { ...thresholds, percentDuration: newVal });
  };

  const handleAccuracyChange = (_, newVal: number | number[]) => {
    if (Array.isArray(newVal)) return;
    setAccThres(newVal);
    updateThresholds(setThresholds, { ...thresholds, rowsAccuracy: newVal });
  };

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Thresholds</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Thresholds used to highlight nodes in the tree.
        </DialogContentText>
        <Typography gutterBottom>Percentage of total duration</Typography>
        <Slider
          ValueLabelComponent={ValueLabelComponent}
          aria-label="custom thumb label"
          value={durThres}
          onChange={handlePercentChange}
        />
        <Typography gutterBottom>Planner rows accuracy</Typography>
        <Slider
          ValueLabelComponent={ValueLabelComponent}
          aria-label="custom thumb label"
          value={accThres}
          onChange={handleAccuracyChange}
        />
      </DialogContent>
    </Dialog>
  );
}

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>
  );
}

export default function ReExecute() {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const [updating, setUpdating] = useState(false);
  const handleClose = () => {
    setOpen(false);
  };

  //
  const { tableState } = useFiretableContext();
  const query: any = isCollectionGroup()
    ? db.collectionGroup(tableState?.tablePath!)
    : db.collection(tableState?.tablePath!);

  const handleConfirm = async () => {
    setUpdating(true);
    const _ft_forcedUpdateAt = new Date();
    const batch = db.batch();
    const querySnapshot = await query.get();
    querySnapshot.docs.forEach((doc) => {
      batch.update(doc.ref, { _ft_forcedUpdateAt });
    });
    await batch.commit();
    setUpdating(false);
    setTimeout(() => setOpen(false), 3000); // give time to for ft function to run
  };

  return (
    <>
      <TableHeaderButton
        title="Force Refresh"
        onClick={() => setOpen(true)}
        icon={<LoopIcon />}
      />

      {open && (
        <Modal
          onClose={handleClose}
          classes={{ paper: classes.paper }}
          title={"Confirm Force Refresh"}
          header={
            <>
              <DialogContentText>
                Are you sure you want to force a re-execute of all Sparks and
                Derivatives?
              </DialogContentText>
            </>
          }
          actions={{
            primary: {
              children: "Confirm",
              onClick: handleConfirm,
              startIcon: updating && (
                <CircularProgress className={classes.spinner} size={16} />
              ),
              disabled: updating,
            },
            secondary: {
              children: "Cancel",
              onClick: handleClose,
            },
          }}
        ></Modal>
      )}
    </>
  );
}

DiscardBroadcastButton = () => {
  const history = useHistory();
  const dispatch = useDispatch();
  const [isOpen, setIsOpen] = useState(false);
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  const handleRedirect = useCallback(() => {
    dispatch(discardBroadcast());
    history.push('/broadcasts');
  }, [dispatch, history]);

  return (
    <>
      <Dialog
        open={isOpen}
        onClose={closeModal}
        aria-labelledby="discard-broadcast-modal"
        aria-describedby="discard-broadcast-confirmation"
      >
        <DialogTitle> Discard notification</DialogTitle>
        <DialogContent>
          <DialogContentText>
            If you discard the notification without completing, changes will not
            be saved. Are you sure?
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={closeModal} color="primary">
            No
          </Button>
          <Button onClick={handleRedirect} color="primary" autoFocus>
            Yes, discard
          </Button>
        </DialogActions>
      </Dialog>
      <Button variant="outlined" color="secondary" onClick={openModal}>
        Discard
      </Button>
    </>
  );
}

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>
  );
}

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;
}