geido commented on code in PR #24449:
URL: https://github.com/apache/superset/pull/24449#discussion_r1494742341
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -91,6 +99,51 @@ class RefreshIntervalModal extends React.PureComponent<
this.setState({
refreshFrequency: value || refreshIntervalOptions[0][0],
});
+
+ if (value === -1) {
+ this.setState({
+ custom_block: true,
+ });
+ } else {
+ this.setState({
+ custom_block: false,
+ });
+ }
+ }
+
+ onSaveValue(value: number) {
+ this.props.onChange(value, this.props.editMode);
+ this.modalRef?.current?.close();
+ this.props.addSuccessToast(t('Refresh interval saved'));
+ }
+
+ createIntervalOptions(refreshIntervalOptions: [number, string][]) {
+ const refresh_options = [];
+ if (refreshIntervalOptions.length === 0) {
Review Comment:
```suggestion
if (!refreshIntervalOptions.length) {
```
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -91,6 +99,51 @@ class RefreshIntervalModal extends React.PureComponent<
this.setState({
refreshFrequency: value || refreshIntervalOptions[0][0],
});
+
+ if (value === -1) {
+ this.setState({
+ custom_block: true,
+ });
+ } else {
+ this.setState({
+ custom_block: false,
+ });
+ }
+ }
Review Comment:
```
this.setState({
custom_block: value === -1,
});
```
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -111,17 +170,81 @@ class RefreshIntervalModal extends React.PureComponent<
modalTitle={t('Refresh interval')}
modalBody={
<div>
- <FormLabel>{t('Refresh frequency')}</FormLabel>
- <Select
- ariaLabel={t('Refresh interval')}
- options={refreshIntervalOptions.map(option => ({
- value: option[0],
- label: t(option[1]),
- }))}
- value={refreshFrequency}
- onChange={this.handleFrequencyChange}
- sortComparator={propertyComparator('value')}
- />
+ <div id="refresh_from_dropdown">
+ <FormLabel>
+ <b>{t('Refresh frequency')}</b>
+ </FormLabel>
+ <Select
+ ariaLabel={t('Refresh interval')}
+ options={this.createIntervalOptions(refreshIntervalOptions)}
+ value={refreshFrequency}
+ onChange={this.handleFrequencyChange}
+ sortComparator={propertyComparator('value')}
+ />
+ </div>
+ <div
+ style={{
+ visibility: custom_block === true ? 'visible' : 'hidden',
+ display: 'flex',
+ gap: '3%',
+ marginTop: '15px',
+ }}
+ id="custom_block_view"
+ >
+ <div style={{ width: '30%', margin: 'auto' }}>
+ <FormLabel>
+ <b>{t('HOUR')}</b>
+ </FormLabel>{' '}
+ <br />
+ <input
Review Comment:
Please use the Input provided by Antdesign in src/components
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -91,6 +99,51 @@ class RefreshIntervalModal extends React.PureComponent<
this.setState({
refreshFrequency: value || refreshIntervalOptions[0][0],
});
+
+ if (value === -1) {
+ this.setState({
+ custom_block: true,
+ });
+ } else {
+ this.setState({
+ custom_block: false,
+ });
+ }
+ }
+
+ onSaveValue(value: number) {
+ this.props.onChange(value, this.props.editMode);
+ this.modalRef?.current?.close();
+ this.props.addSuccessToast(t('Refresh interval saved'));
+ }
+
+ createIntervalOptions(refreshIntervalOptions: [number, string][]) {
+ const refresh_options = [];
+ if (refreshIntervalOptions.length === 0) {
+ refresh_options.push({ value: -1, label: 'Custom interval' });
+ return refresh_options;
+ }
+ refresh_options.push({
+ value: refreshIntervalOptions[0][0],
+ label: t(refreshIntervalOptions[0][1]),
+ });
+ refresh_options.push({ value: -1, label: 'Custom interval' });
+ for (let i = 1; i < refreshIntervalOptions.length; i += 1)
+ refresh_options.push({
+ value: refreshIntervalOptions[i][0],
+ label: t(refreshIntervalOptions[i][1]),
+ });
+ return refresh_options;
+ }
Review Comment:
I think you need to review these logics here. Are you trying to put the
custom interval at a specific position of the array?
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -111,17 +157,89 @@ class RefreshIntervalModal extends React.PureComponent<
modalTitle={t('Refresh interval')}
modalBody={
<div>
- <FormLabel>{t('Refresh frequency')}</FormLabel>
- <Select
- ariaLabel={t('Refresh interval')}
- options={refreshIntervalOptions.map(option => ({
- value: option[0],
- label: t(option[1]),
- }))}
- value={refreshFrequency}
- onChange={this.handleFrequencyChange}
- sortComparator={propertyComparator('value')}
- />
+ <div id="refresh_from_dropdown">
+ <FormLabel>
+ <b>{t('Refresh frequency')}</b>
+ </FormLabel>
+ <Select
+ ariaLabel={t('Refresh interval')}
+ options={this.createIntervalOptions(refreshIntervalOptions)}
+ value={refreshFrequency}
+ onChange={this.handleFrequencyChange}
+ sortComparator={propertyComparator('value')}
+ />
+ </div>
+ <div
+ style={{
+ visibility: refreshFrequency === -1 ? 'visible' : 'hidden',
+ display: 'flex',
+ gap: '3%',
+ marginTop: '15px',
+ }}
+ id="custom_block_view"
Review Comment:
What is that is not working specifically? We definitely need to show this
conditionally and not hidden via CSS
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -111,17 +170,81 @@ class RefreshIntervalModal extends React.PureComponent<
modalTitle={t('Refresh interval')}
modalBody={
<div>
- <FormLabel>{t('Refresh frequency')}</FormLabel>
- <Select
- ariaLabel={t('Refresh interval')}
- options={refreshIntervalOptions.map(option => ({
- value: option[0],
- label: t(option[1]),
- }))}
- value={refreshFrequency}
- onChange={this.handleFrequencyChange}
- sortComparator={propertyComparator('value')}
- />
+ <div id="refresh_from_dropdown">
+ <FormLabel>
+ <b>{t('Refresh frequency')}</b>
+ </FormLabel>
+ <Select
+ ariaLabel={t('Refresh interval')}
+ options={this.createIntervalOptions(refreshIntervalOptions)}
+ value={refreshFrequency}
+ onChange={this.handleFrequencyChange}
+ sortComparator={propertyComparator('value')}
+ />
+ </div>
+ <div
+ style={{
+ visibility: custom_block === true ? 'visible' : 'hidden',
+ display: 'flex',
+ gap: '3%',
+ marginTop: '15px',
+ }}
+ id="custom_block_view"
+ >
+ <div style={{ width: '30%', margin: 'auto' }}>
+ <FormLabel>
+ <b>{t('HOUR')}</b>
+ </FormLabel>{' '}
+ <br />
+ <input
+ type="number"
+ min="0"
+ className="form-control input-sm"
+ id="custom_refresh_frequency_hour"
+ placeholder="Type a number"
Review Comment:
This needs to be localized `t('Type a number')`
##########
superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx:
##########
@@ -91,6 +99,51 @@ class RefreshIntervalModal extends React.PureComponent<
this.setState({
refreshFrequency: value || refreshIntervalOptions[0][0],
});
+
+ if (value === -1) {
+ this.setState({
+ custom_block: true,
+ });
+ } else {
+ this.setState({
+ custom_block: false,
+ });
+ }
+ }
+
+ onSaveValue(value: number) {
+ this.props.onChange(value, this.props.editMode);
+ this.modalRef?.current?.close();
+ this.props.addSuccessToast(t('Refresh interval saved'));
+ }
+
+ createIntervalOptions(refreshIntervalOptions: [number, string][]) {
+ const refresh_options = [];
+ if (refreshIntervalOptions.length === 0) {
+ refresh_options.push({ value: -1, label: 'Custom interval' });
+ return refresh_options;
+ }
+ refresh_options.push({
+ value: refreshIntervalOptions[0][0],
+ label: t(refreshIntervalOptions[0][1]),
+ });
+ refresh_options.push({ value: -1, label: 'Custom interval' });
+ for (let i = 1; i < refreshIntervalOptions.length; i += 1)
+ refresh_options.push({
+ value: refreshIntervalOptions[i][0],
+ label: t(refreshIntervalOptions[i][1]),
+ });
+ return refresh_options;
+ }
+
+ min_sec_options(min_or_sec: string) {
+ const options = [];
+ for (let i = 0; i < 60; i += 1)
+ options.push({
+ value: i,
+ label: `${i} ${min_or_sec}`,
+ });
+ return options;
}
Review Comment:
```
min_sec_options(min_or_sec: string) {
return Array.from({ length: 60 }, (_, i) => ({
value: i,
label: `${i} ${min_or_sec}`,
}));
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
