@mui/material#CircularProgress JavaScript Examples

render() {
    const { t, open, ownerName, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to remove {ownerName} from this folder?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to delete the LDAP config?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="primary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, loading, onClose, onDetach } = this.props;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to detach this user?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={onDetach}
            variant="contained"
            color="primary"
          >
            {loading ? <CircularProgress color="secondary" size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, item, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to delete {item}?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, item, onClose } = this.props;
    const { loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('deleteDialog', { item })}?</DialogTitle>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

function Loading(props) {
  if (props.error) {
    console.error(props.error); // eslint-disable-line no-console
    return <div id="loader">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Typography variant="body1" style={{ marginRight: 8 }}>Error loading page</Typography>
        <Button size="small" variant="text" color="primary" onClick={ handleRetry }>Retry</Button>
      </div>
    </div>;
  } else if (props.timedOut) {
    return <div id="loader">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Typography variant="body1" style={{ marginRight: 8 }}>Taking a long time...</Typography>
        <Button size="small" variant="text" color="primary" onClick={ handleRetry }>Retry</Button>
      </div>
    </div>;
  } else if (props.pastDelay) {
    return <div id="loader">
      <CircularProgress />
    </div>;
  } else {
    return null;
  }
}

function ButtonCircularProgress(props) {
  const { size, classes } = props;
  return (
    <Box color="secondary.main" pl={1.5} display="flex">
      <CircularProgress
        size={size ? size : 24}
        thickness={size ? (size / 5) * 24 : 5}
        className={classes.circularProgress}
      />
    </Box>
  );
}

Loader = ({size: Size, text: Text}) => {
    if(!Size){
        Size=22;
    }

    const fontStyle = {
        paddingLeft: Size/10+'px',
        fontSize: Size+'px',
    };

    return(
        <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            flexWrap: 'wrap',
        }}>
            <CircularProgress size={Size} />
            {typeof(Text) !== 'undefined' && Text !== "" ?(
                <Typography style={fontStyle}>{Text}</Typography>
            ):(
                <></>
            )}
        </span>
    );
}

Loading = () => {
  return (
    <StyledLoading>
      <Box position="relative">
        <img src="/assets/images/logo-circle.svg" alt="" />
        <CircularProgress className="circleProgress" />
      </Box>
    </StyledLoading>
  );
}

render() {
    const { classes, t, domain, ldapUsers } = this.props;
    const { loading, snackbar, confirming } = this.state;
    const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
    return (
      <ViewWrapper
        topbarTitle={domain.domainname}
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Typography variant="h2" className={classes.pageTitle}>
          <BackIcon onClick={this.handleNavigation(domain.ID + '/users')} className={classes.backIcon} />
          <span className={classes.pageTitleSecondary}>| </span>
          {t("LDAP")}
        </Typography>
        <Grid container justifyContent="center">
          <TextField
            autoFocus
            placeholder={t("Search LDAP")}
            onChange={this.handleLdapSearch}
            variant="outlined"
            color="primary"
            fullWidth
            className={classes.searchTf}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Search color="primary"/>
                </InputAdornment>
              ),
            }}
          />
        </Grid>
        {ldapUsers.length > 0 && <Paper elevation={1}>
          <List>
            {ldapUsers.map((user, idx) => <React.Fragment key={idx}>
              <ListItem >
                <ListItemText
                  primary={user.name}
                  primaryTypographyProps={{ color: 'primary' }}
                  secondary={user.email}
                />
                {writable && <IconButton onClick={this.handleImport(user)} size="large">
                  <Import />
                </IconButton>}
              </ListItem>
              <Divider />
            </React.Fragment>
            )}
          </List>
        </Paper>}
        <Grid container justifyContent="center" className={classes.loaderContainer}>
          <Grow
            in={loading}
            timeout={{
              appear: 500,
              enter: 10,
              exit: 10,
            }}
          >
            <CircularProgress color="primary" size={40}/>
          </Grow>
        </Grid>
        <ImportDialog
          open={!!confirming}
          user={confirming || {}}
          onSuccess={this.handleSuccess}
          onClose={this.handleClose}
          onError={this.handleError}
        />
      </ViewWrapper>
    );
  }

render() {
    const { classes, t, open, onClose } = this.props;
    const { service, filename, data, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'File' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Service name")} 
              fullWidth 
              value={service || ''}
              onChange={this.handleInput('service')}
              autoFocus
              required
            />
            <TextField 
              className={classes.input} 
              label={t("File name")} 
              fullWidth 
              value={filename || ''}
              onChange={this.handleInput('filename')}
              required
            />
            <Typography>Data</Typography>
            {data.map((pair, idx) => <Grid container key={idx}>
              <TextField
                label="key"
                value={pair.key}
                onChange={this.handleDataInput('key', idx)}
                className={classes.flexTextfield}
              />
              <TextField
                label="value"
                value={pair.value}
                onChange={this.handleDataInput('value', idx)}
                className={classes.flexTextfield}
              />
              <IconButton onClick={this.handleRemoveRow(idx)} size="large">
                <Delete color="error"/>
              </IconButton>
            </Grid>
            )}
            <Grid container justifyContent="center">
              <IconButton onClick={this.handleAddRow} size="large">
                <Add color="primary"/>
              </IconButton>
            </Grid>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleUpload}
            variant="contained"
            color="primary"
            disabled={loading || !service}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

export default function AsyncAutocomplete() {
  const [open, setOpen] = React.useState(false);
  const [options, setOptions] = React.useState([]);
  const loading = open && options.length === 0;

  React.useEffect(() => {
    let active = true;

    if (!loading) {
      return undefined;
    }

    (async () => {
      const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
      await sleep(3000); // For demo purposes.
      const countries = await response.json();

      if (active) {
        setOptions(Object.keys(countries).map((key) => countries[key].item[0]));
      }
    })();

    return () => {
      active = false;
    };
  }, [loading]);

  React.useEffect(() => {
    if (!open) {
      setOptions([]);
    }
  }, [open]);

  return (
    <AutoComplete
      open={open}
      options={options}
      loading={loading}
      id="asynchronous-demo"
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      getOptionLabel={(option) => option.name}
      renderInput={(params) => (
        <TextField
          {...params}
          fullWidth
          variant="outlined"
          label="Asynchronous"
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <React.Fragment>
                {loading ? <CircularProgress color="inherit" size={20} /> : null}
                {params.InputProps.endAdornment}
              </React.Fragment>
            ),
          }}
        />
      )}
    />
  );
}

render() {
    const { t, open, user, onClose } = this.props;
    const { loading, force } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to import {user.name}?</DialogTitle>
        <DialogContent>
          <FormControlLabel
            control={
              <Checkbox
                checked={force}
                onChange={this.handleChange}
                color="primary"
              />
            }
            label="force"
          />
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleImport}
            variant="contained"
            color="primary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, auth } = this.props;
    const { user, pass, loading } = this.state;
    return (
      <div className={classes.root}>
        <Paper elevation={3} className={classes.loginForm} component="form" onSubmit={this.handleLogin} >
          <div className={classes.logoContainer}>
            <img src={logo} width="300" height={68} alt="grommunio"/>
          </div>
          <Paper className={classes.inputContainer}>
            <AccountCircle className={classes.inputAdornment}/>
            <InputBase
              fullWidth
              autoFocus
              error={!!auth.error}
              className={classes.input}
              placeholder={t("Username")}
              value={user}
              onChange={this.handleTextinput('user')}
              name="username"
              id="username"
              autoComplete="username"
            />
          </Paper>
          <Paper className={classes.inputContainer}>
            <Key className={classes.inputAdornment}/>
            <InputBase
              fullWidth
              type="password"
              className={classes.input}
              error={!!auth.error}
              placeholder={t("Password")}
              value={pass}
              onChange={this.handleTextinput('pass')}
              name="password"
              id="password"
              autoComplete="currect-password"
            />
          </Paper>
          {auth.error && <MuiAlert elevation={6} variant="filled" severity="error" className={classes.errorMessage}>
            {auth.error || t("Failed to login. Incorrect password or username")}
          </MuiAlert>}
          <Paper className={classes.inputContainer}>
            <Button
              className={classes.button}
              type="submit"
              variant="contained"
              color="primary"
              onClick={this.handleLogin}
              disabled={!user || !pass}
            >
              {loading ? <CircularProgress size={24}  color="inherit" className={classes.loader}/> :
                <Typography>{t('Login')}</Typography>}
            </Button>
          </Paper>
        </Paper>
        <div className={classes.background}></div>
      </div>
    );
  }

render() {
    const { t, open, user, onClose } = this.props;
    const { checked, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>Are you sure you want to delete {user.username}?</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControlLabel
            control={
              <Checkbox
                checked={checked}
                onChange={() => this.setState({ checked: !checked })}
                name="checked"
                color="primary"
              />
            }
            label="Delete files?"
          />
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, item, onClose } = this.props;
    const { loading, clear, taskMessage, taskID } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{taskMessage ? taskMessage : `Are you sure you want to delete ${item}?`}</DialogTitle>
        <DialogContent>
          {!taskMessage && <FormControlLabel
            control={<Checkbox onChange={this.handleCheckbox} value={clear} />}
            label={t('Clear folder data')}
          />}
        </DialogContent>
        <DialogActions>
          <Button
            onClick={this.handleClose}
            color="secondary"
          >
            {t(taskMessage ? 'Close' : 'Cancel')}
          </Button>
          {!taskMessage && <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>}
          {taskMessage && taskID > 0 && <Button variant="contained" onClick={this.handleViewTask}>
            {t('View task')}
          </Button>
          }
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { t, open, item, onClose, capabilities } = this.props;
    const { loading, purge, deleteFiles } = this.state;
    const canPurge = capabilities.includes(DOMAIN_PURGE);
    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('deleteDialog', { item })}?</DialogTitle>
        {canPurge && <DialogContent>
          <FormControlLabel
            control={
              <Checkbox
                checked={purge}
                onChange={this.handlePurge}
                name="checked"
                color="primary"
              />
            }
            label="Delete permanently?"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={deleteFiles}
                onChange={() => this.setState({ deleteFiles: !deleteFiles })}
                name="checked"
                color="primary"
                disabled={!purge}
              />
            }
            label="Delete files?"
          />
        </DialogContent>}
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleDelete}
            variant="contained"
            color="secondary"
          >
            {loading ? <CircularProgress size={24}/> : t('Confirm')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

AppProgress = () => {
    const [completed, setCompleted] = React.useState(0)

    React.useEffect(() => {
        function progress() {
            setCompleted((oldCompleted) => {
                if (oldCompleted === 100) {
                    return 0
                }
                const diff = Math.random() * 10
                return Math.min(oldCompleted + diff, 100)
            })
        }

        const timer = setInterval(progress, 500)
        return () => {
            clearInterval(timer)
        }
    }, [])

    return (
        <ProgressRoot>
            <div className="breadcrumb">
                <Breadcrumb
                    routeSegments={[
                        { name: 'Material', path: '/material' },
                        { name: 'Prgress' },
                    ]}
                />
            </div>
            <SimpleCard title="Circuar Progress (Indeterminate)">
                <CircularProgress className="progress" />
                <CircularProgress className="progress" color="secondary" />
            </SimpleCard>
            <Box py="12px" />
            <SimpleCard title="Circuar Progress (static)">
                <CircularProgress
                    value={25}
                    variant="determinate"
                    className="progress"
                />
                <CircularProgress
                    value={50}
                    variant="determinate"
                    className="progress"
                    color="secondary"
                />
                <CircularProgress
                    value={75}
                    variant="determinate"
                    className="progress"
                    color="secondary"
                />
            </SimpleCard>
            <Box py="12px" />
            <SimpleCard title="Linear Progress (Indeterminate)">
                <LinearProgress />
                <br />
                <LinearProgress color="secondary" />
            </SimpleCard>
            <Box py="12px" />
            <SimpleCard title="Linear Progress (Determinate)">
                <LinearProgress variant="determinate" value={completed} />
                <br />
                <LinearProgress
                    color="secondary"
                    variant="determinate"
                    value={completed}
                />
            </SimpleCard>
        </ProgressRoot>
    )
}

render() {
    const { classes, t, open, onClose } = this.props;
    const { hostname, extname, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
        TransitionProps={{
          onEnter: this.handleEnter,
        }}>
        <DialogTitle>{t('addHeadline', { item: 'Server' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Hostname")} 
              fullWidth 
              value={hostname || ''}
              onChange={this.handleInput('hostname')}
              autoFocus
              required
            />
            <TextField 
              className={classes.input} 
              label={t("extname")} 
              fullWidth 
              value={extname || ''}
              onChange={this.handleInput('extname')}
              required
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={loading || !hostname || !extname}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

LanguageDropdown = ({ language, setLanguage }) => {
    const { t } = useTranslation();
    const { edlibApi } = useConfigurationContext();

    const [open, setOpen] = React.useState(false);
    const { error, loading, response } = useFetchWithToken(
        edlibApi('/resources/v1/languages'),
        'GET',
        React.useMemo(() => ({}), []),
        true,
        true
    );

    return (
        <Autocomplete
            open={open}
            onOpen={() => {
                setOpen(true);
            }}
            onClose={() => {
                setOpen(false);
            }}
            isOptionEqualToValue={(option, value) => option === value}
            getOptionLabel={(option) => iso6393ToString(option)}
            options={response ? response.data : []}
            loading={loading}
            onChange={(e, v) => {
                setLanguage(v);
            }}
            value={language}
            renderInput={(params) => (
                <TextField
                    {...params}
                    fullWidth
                    label={_.capitalize(t('language'))}
                    variant="outlined"
                    InputProps={{
                        ...params.InputProps,
                        endAdornment: (
                            <>
                                {loading ? (
                                    <CircularProgress
                                        color="inherit"
                                        size={20}
                                    />
                                ) : null}
                                {params.InputProps.endAdornment}
                            </>
                        ),
                    }}
                />
            )}
        />
    );
}

render() {
    const { classes, t, open, onCancel, Users } = this.props;
    const { owners, loading, autocompleteInput } = this.state;
    return (
      <Dialog
        onClose={onCancel}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'Owner' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <MagnitudeAutocomplete
              multiple
              value={owners || []}
              filterAttribute={'username'}
              inputValue={autocompleteInput}
              onChange={this.handleAutocomplete('owners')}
              className={classes.input} 
              options={Users || []}
              onInputChange={this.handleInput('autocompleteInput')}
              placeholder={t("Search users") +  "..."}
              label={t('Owners')}
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onCancel}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={owners.length === 0 || loading}
          >
            {loading ? <CircularProgress size={24}/> : 'Add'}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose, Domains } = this.props;
    const { name, description, domains, autocompleteInput, loading } = this.state;
    const nameAcceptable = name.length < 33;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
        TransitionProps={{
          onEnter: this.handleEnter,
        }}>
        <DialogTitle>{t('addHeadline', { item: 'Organization' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Name")} 
              fullWidth 
              value={name || ''}
              onChange={this.handleInput('name')}
              autoFocus
              required
              error={Boolean(name && !nameAcceptable)}
            />
            <TextField 
              className={classes.input} 
              label={t("Description")} 
              fullWidth 
              value={description || ''}
              onChange={this.handleInput('description')}
              multiline
              rows={4}
              variant="outlined"
            />
            <MagnitudeAutocomplete
              value={domains || []}
              filterAttribute={'domainname'}
              inputValue={autocompleteInput}
              onChange={this.handleAutocomplete('domains')}
              className={classes.input} 
              options={Domains || []}
              onInputChange={this.handleInput('autocompleteInput')}
              label={t('Domains')}
              placeholder={t("Search domains") + "..."}
              multiple
              autoSelect
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={loading || !nameAcceptable}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

ResourceFiltersContainer = (props) => {
    const { edlibApi } = useConfigurationContext();

    const { loading: loadingContentTypes, response: contentTypeResponse } =
        useFetchWithToken(
            edlibApi(`/resources/v2/content-types/contentauthor`),
            'GET',
            React.useMemo(() => ({}), []),
            true,
            true
        );
    const { loading: loadingLicenses, response: licenseResponse } =
        useFetchWithToken(
            edlibApi(`/resources/v1/filters/licenses`),
            'GET',
            React.useMemo(() => ({}), []),
            true,
            true
        );

    const {
        loading: loadingSavedFilters,
        response: savedFilterResponse,
        setResponse: setResponseSavedFilter,
    } = useFetchWithToken(
        edlibApi(`/common/saved-filters`),
        'GET',
        React.useMemo(() => ({}), []),
        true,
        true
    );

    if (loadingContentTypes || loadingLicenses || loadingSavedFilters) {
        return <CircularProgress />;
    }

    return (
        <ResourceFilters
            contentTypeData={
                contentTypeResponse ? contentTypeResponse.data : []
            }
            licenseData={licenseResponse ? licenseResponse : []}
            savedFilterData={savedFilterResponse}
            updateSavedFilter={(data, remove = false) => {
                let values;
                if (!remove) {
                    const savedFilter = data;
                    values = Object.values(
                        savedFilterResponse.reduce(
                            (byId, _s) => ({
                                ...byId,
                                [_s.id]: byId[_s.id] || _s,
                            }),
                            {
                                [savedFilter.id]: savedFilter,
                            }
                        )
                    );
                } else {
                    const removedId = data;
                    values = savedFilterResponse.filter(
                        (_s) => _s.id !== removedId
                    );
                }

                setResponseSavedFilter(values);
            }}
            {...props}
        />
    );
}

render() {
    const { classes, t, open, onClose, Users } = this.props;
    const { displayname, owners, container, comment, loading, autocompleteInput } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'Folder' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              label={t("Folder name")}
              value={displayname}
              onChange={this.handleInput('displayname')}
              className={classes.input}
              autoFocus
              required
            />
            <TextField
              select
              className={classes.input}
              label={t("Container")}
              fullWidth
              value={container || ''}
              onChange={this.handleInput('container')}
            >
              {this.types.map((type, key) => (
                <MenuItem key={key} value={type.ID}>
                  {type.name}
                </MenuItem>
              ))}
            </TextField>
            <TextField 
              className={classes.input} 
              label={t("Comment")} 
              fullWidth
              multiline
              rows={4}
              value={comment}
              variant="outlined"
              onChange={this.handleInput('comment')}
            />
            <MagnitudeAutocomplete
              multiple
              value={owners || []}
              filterAttribute={'username'}
              inputValue={autocompleteInput}
              onChange={this.handleAutocomplete('owners')}
              className={classes.input} 
              options={Users || []}
              onInputChange={this.handleInput('autocompleteInput')}
              label={t('Owners')}
              placeholder={t("Search domains")  + "..."}
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            Cancel
          </Button>
          <Button
            onClick={this.handleAdd}
            variant="contained"
            color="primary"
            disabled={!displayname || loading}
          >
            {loading ? <CircularProgress size={24}/> : 'Add'}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
    const { classes, t, open, onClose, commands } = this.props;
    const { service, data, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>Configure grommunio-dbconf</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Service name")} 
              fullWidth 
              value={service || ''}
              onChange={this.handleInput('service')}
              autoFocus
              required
            />
            <Typography variant="h6">Data</Typography>
            {data.map((pair, idx) => <Grid key={idx} container alignItems="flex-end">
              <Typography className={classes.gridTypo}>
                {pair.key}
              </Typography>
              <TextField
                label="value"
                value={pair.value}
                onChange={this.handleDataInput(idx)}
                className={classes.flexTextfield}
                select
              >
                {commands[this.commandKeys[idx]].map((command, idx) =>
                  <MenuItem key={idx} value={command}>
                    {command}
                  </MenuItem>
                )}
              </TextField>
            </Grid>
            )}
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleUpload}
            variant="contained"
            color="primary"
            disabled={loading || !service}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

ResourceStats = ({ resourceId }) => {
    const { t } = useTranslation();
    const { edlibApi } = useConfigurationContext();

    const { loading, response } = useFetchWithToken(
        edlibApi(`/resources/v1/resources/${resourceId}/stats`)
    );

    if (loading || !response) {
        return <CircularProgress />;
    }
    const last7daysViews = response.data.last7daysViews;
    const datasets = [
        {
            key: 'count',
            name: _.capitalize(t('resource_view', { count: 2 })),
            dataset: last7daysViews,
        },
    ];

    return (
        <>
            <Box pb={2}>
                <strong>{t('S.VIEWS_PAST_7_DAYS')}</strong>
            </Box>
            <ResponsiveContainer width="100%" height={100}>
                <LineChart
                    data={fillEmptyDays(
                        last7daysViews,
                        moment().subtract(7, 'days').startOf('day'),
                        moment().endOf('day'),
                        {
                            zeroFields: datasets.map((dataset) => dataset.key),
                        }
                    )}
                    margin={{
                        left: -20,
                    }}
                >
                    <XAxis dataKey="date" />
                    <YAxis allowDecimals={false} />
                    <Tooltip />
                    {datasets.map((dataset) => (
                        <Line
                            key={dataset.name}
                            dot={false}
                            name={dataset.name}
                            type="monotone"
                            dataKey={dataset.key}
                            stroke={dataset.color}
                            yAxisId={0}
                            isAnimationActive={false}
                        />
                    ))}
                </LineChart>
            </ResponsiveContainer>
        </>
    );
}

render() {
    const { classes, t, folders, domain, tableState, handleMatch,
      handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
      clearSnackbar, handleDelete, handleDeleteClose, handleDeleteError,
      handleDeleteSuccess, handleEdit } = this.props;
    const { Folders, moreDataAvailable } = folders;
    const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
    const { match, snackbar, adding, deleting } = tableState;
    const { hierarchy } = this.state;

    return (
      <TableViewContainer
        handleScroll={this.handleScroll}
        headline={t("Folders")}
        subtitle={t('folders_sub')}
        href="https://docs.grommunio.com/admin/administration.html#folders"
        snackbar={snackbar}
        onSnackbarClose={clearSnackbar}
      >
        <Grid container alignItems="flex-end" className={classes.buttonGrid}>
          <Button
            variant="contained"
            color="primary"
            onClick={handleAdd}
            disabled={!writable}
          >
            {t('New folder')}
          </Button>
          <div className={classes.actions}>
            <TextField
              value={match}
              onChange={handleMatch}
              placeholder={t("Search")}
              variant="outlined"
              className={classes.textfield}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search color="secondary" />
                  </InputAdornment>
                ),
              }}
              color="primary"
            />
          </div>
        </Grid>
        <Typography className={classes.count} color="textPrimary">
          {t("showingFolders", { count: Folders.length + (hierarchy.length === 1 ? 1 : 0) })}
        </Typography>
        <Breadcrumbs aria-label="breadcrumb" className={classes.breadcumbs}>
          {hierarchy.map((folder, idx) => 
            <Link
              key={folder.folderid}
              underline="hover"
              color="primary"
              onClick={this.handleBreadcrumb(folder, idx)}
              className={classes.link}
            >
              {folder.displayname}
            </Link>
          )}
        </Breadcrumbs>
        <Paper className={classes.tablePaper} elevation={1}>
          <Table size="small">
            <TableHead>
              <TableRow>
                {['Folder name', 'Comment', 'Creation time', ''].map(headerName =>
                  <TableCell key={headerName}>{t(headerName)}</TableCell>
                )}
              </TableRow>
            </TableHead>
            <TableBody>
              {hierarchy.length === 1 && <TableRow>
                <TableCell>{IPM_SUBTREE_OBJECT.displayname}</TableCell>
                <TableCell>{t(IPM_SUBTREE_OBJECT.comment)}</TableCell>
                <TableCell></TableCell>
                <TableCell align="right">
                  <IconButton onClick={handleEdit('/' + domain.ID + '/folders/' + IPM_SUBTREE_ID)} size="large">
                    <Edit color="primary"/>
                  </IconButton>
                </TableCell>
              </TableRow>}
              {Folders.map((obj, idx) =>
                <TableRow hover onClick={this.handleFetchChildren(obj)} key={idx}>
                  <TableCell>{obj.displayname}</TableCell>
                  <TableCell>{obj.comment}</TableCell>
                  <TableCell>{obj.creationtime}</TableCell>
                  <TableCell align="right">
                    <IconButton onClick={handleEdit('/' + domain.ID + '/folders/' + obj.folderid)} size="large">
                      <Edit color="primary"/>
                    </IconButton>
                    {writable && <IconButton onClick={handleDelete(obj)} size="large">
                      <Delete color="error"/>
                    </IconButton>}
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
          {(moreDataAvailable) && <Grid container justifyContent="center">
            <CircularProgress color="primary" className={classes.circularProgress}/>
          </Grid>}
        </Paper>
        <AddFolder
          open={adding}
          onClose={handleAddingClose}
          onSuccess={handleAddingSuccess}
          onError={handleAddingError}
          domain={domain}
          parentID={hierarchy[hierarchy.length - 1].folderid}
        />
        <DeleteFolder
          open={!!deleting}
          delete={this.props.delete}
          onSuccess={handleDeleteSuccess}
          onError={handleDeleteError}
          onClose={handleDeleteClose}
          item={deleting.displayname}
          id={deleting.folderid}
          domainID={domain.ID}
        />
      </TableViewContainer>
    );
  }

LoginForm = (props) => {
  const { redirectTo, className } = props;
  const [loading, setLoading] = useSafeSetState(false);
  const login = useLogin();
  const translate = useTranslate();
  const notify = useNotify();
  const [demoUser, setDemoUser] = useState(null);

  useEffect(() => {
    if (demoUser) {
      return;
    }

    async function getDemoUser() {
      const userData = await API.graphql({
        query: getUser,
        variables: { id: "demo" },
        authMode: "AWS_IAM",
      });

      const { username, password } = userData.data.getUser;

      setDemoUser({ username, password });
    }

    getDemoUser();
  });

  if (!demoUser) {
    return null;
  }

  const submit = (values) => {
    setLoading(true);
    login(values, redirectTo)
      .then(() => {
        setLoading(false);
      })
      .catch((error) => {
        setLoading(false);
        notify(
          typeof error === "string"
            ? error
            : typeof error === "undefined" || !error.message
            ? "ra.auth.sign_in_error"
            : error.message,
          {
            type: "warning",
            messageArgs: {
              _:
                typeof error === "string"
                  ? error
                  : error && error.message
                  ? error.message
                  : undefined,
            },
          }
        );
      });
  };

  return (
    <StyledForm
      onSubmit={submit}
      mode="onChange"
      noValidate
      className={className}
      defaultValues={demoUser}
    >
      <CardContent className={LoginFormClasses.content}>
        <TextInput
          autoFocus
          source="username"
          label={translate("ra.auth.username")}
          validate={required()}
          fullWidth
        />
        <TextInput
          source="password"
          label={translate("ra.auth.password")}
          type="password"
          autoComplete="current-password"
          validate={required()}
          fullWidth
        />

        <Button
          variant="contained"
          type="submit"
          color="primary"
          disabled={loading}
          fullWidth
          className={LoginFormClasses.button}
        >
          {loading ? (
            <CircularProgress
              className={LoginFormClasses.icon}
              size={19}
              thickness={3}
            />
          ) : (
            translate("ra.auth.sign_in")
          )}
        </Button>
      </CardContent>
    </StyledForm>
  );
}

render() {
    const { classes, t, users, domain, tableState, handleMatch, handleRequestSort,
      handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
      handleDelete, handleDeleteClose, handleDeleteError,
      handleDeleteSuccess, handleEdit } = this.props;
    const { order, orderBy, match, snackbar, adding, deleting } = tableState;
    const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
    const { checking, taskMessage, taskID } = this.state;
    return (
      <TableViewContainer
        handleScroll={this.handleScroll}
        headline={t("Users")}
        subtitle={t('users_sub')}
        href="https://docs.grommunio.com/admin/administration.html#users"
        snackbar={snackbar || this.state.snackbar}
        onSnackbarClose={this.handleSnackbarClose}
      >
        <Grid container alignItems="flex-end" className={classes.buttonGrid}>
          <Button
            variant="contained"
            color="primary"
            onClick={handleAdd}
            className={classes.newButton}
            disabled={!writable}
          >
            {t('New user')}
          </Button>
          <Button
            variant="contained"
            color="primary"
            onClick={this.handleNavigation(domain.ID + '/ldap')}
            className={classes.newButton}
            disabled={!writable}
          >
            {t('Search in LDAP')}
          </Button>
          <Tooltip placement="top" title="Synchronize imported users for this domain">
            <Button
              variant="contained"
              color="primary"
              className={classes.newButton}
              onClick={this.handleUserSync(false)}
              disabled={!writable}
            >
              {t('Sync LDAP users')}
            </Button>
          </Tooltip>
          <Tooltip
            placement="top"
            title="Import new users from LDAP for this domain and synchronize previously imported ones"
          >
            <Button
              variant="contained"
              color="primary"
              className={classes.newButton}
              onClick={this.handleUserSync(true)}
              disabled={!writable}
            >
              {t('Import LDAP users')}
            </Button>
          </Tooltip>
          <Tooltip
            placement="top"
            title="Check status of imported users of this domain"
          >
            <Button
              variant="contained"
              color="primary"
              onClick={this.checkUsers}
              disabled={!writable}
            >
              {t('Check LDAP users')}
            </Button>
          </Tooltip>
          <div className={classes.actions}>
            <TextField
              value={match}
              onChange={handleMatch}
              placeholder={t("Search")}
              variant="outlined"
              className={classes.textfield}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search color="secondary" />
                  </InputAdornment>
                ),
              }}
              color="primary"
            />
          </div>
        </Grid>
        <Typography className={classes.count} color="textPrimary">
          {t("showingUser", { count: users.Users.length })}
        </Typography>
        <Paper className={classes.tablePaper} elevation={1}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>
                  <TableSortLabel
                    active={orderBy === 'username'}
                    align="left" 
                    direction={orderBy === 'username' ? order : 'asc'}
                    onClick={handleRequestSort('username')}
                    color="primary"
                    sx={{
                      color: 'text.primary',
                    }}
                  >
                    {t('Username')}
                  </TableSortLabel>
                </TableCell>
                {this.columns.map(column =>
                  <TableCell key={column.value}>
                    {t(column.label)}
                  </TableCell>
                )}
                <TableCell padding="checkbox"></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {users.Users.map((obj, idx) => {
                const properties = obj.properties || {};
                return (
                  <TableRow key={idx} hover onClick={handleEdit('/' + domain.ID + '/users/' + obj.ID)}>
                    <TableCell>{obj.username}</TableCell>
                    <TableCell>{properties.displayname}</TableCell>
                    <TableCell>{this.getStatus(obj.status)}</TableCell>
                    <TableCell>{this.getType(properties.displaytypeex)}</TableCell>
                    <TableCell>{obj.ldapID || ''}</TableCell>
                    <TableCell>{this.getMaxSizeFormatting(properties.storagequotalimit)}</TableCell>
                    <TableCell align="right">
                      {writable && <IconButton onClick={handleDelete(obj)} size="large">
                        <Delete color="error"/>
                      </IconButton>}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
          {(users.Users.length < users.count) && <Grid container justifyContent="center">
            <CircularProgress color="primary" className={classes.circularProgress}/>
          </Grid>}
        </Paper>
        <AddUser
          open={adding}
          onSuccess={handleAddingSuccess}
          onError={handleAddingError}
          domain={domain}
          onClose={handleAddingClose}
        />
        <DeleteUser
          open={!!deleting}
          onSuccess={handleDeleteSuccess}
          onClose={handleDeleteClose}
          onError={handleDeleteError}
          domainID={domain.ID}
          user={deleting}
        />
        <CheckLdapDialog
          open={checking}
          onClose={this.handleCheckClose}
          onError={handleDeleteError}
        />
        <TaskCreated
          message={taskMessage}
          taskID={taskID}
          onClose={this.handleTaskClose}
        />
      </TableViewContainer>
    );
  }