Update retention policy for bucket if time changes

CHANGELOG.md

@@ -5,6 +5,7 @@
 1. [11990](https://github.com/influxdata/influxdb/pull/11990): Add the ability to select a custom time range in explorer and dashboard
 
 ### Bug Fixes
+1. [11997](https://github.com/influxdata/influxdb/pull/11997): Update the bucket retention policy to update the time in seconds
 
 ### UI Improvements
 

ui/src/organizations/components/Retention.tsx

@@ -23,6 +23,8 @@ interface Props {
   onChangeRuleType: (type: BucketRetentionRules.TypeEnum) => void
 }
 
+export const DEFAULT_SECONDS = 0
+
 export default class Retention extends PureComponent<Props> {
   public render() {
     const {retentionSeconds, type} = this.props
@@ -56,6 +58,7 @@ export default class Retention extends PureComponent<Props> {
   }
 
   private handleRadioClick = (type: BucketRetentionRules.TypeEnum) => {
+    this.props.onChangeRetentionRule(DEFAULT_SECONDS)
     this.props.onChangeRuleType(type)
   }
 

ui/src/organizations/components/UpdateBucketOverlay.tsx

@@ -10,6 +10,9 @@ import {
 } from 'src/clockface'
 import BucketOverlayForm from 'src/organizations/components/BucketOverlayForm'
 
+// Constants
+import {DEFAULT_SECONDS} from 'src/organizations/components/Retention'
+
 // Types
 import {Bucket, BucketRetentionRules} from '@influxdata/influx'
 
@@ -75,7 +78,7 @@ export default class BucketOverlay extends PureComponent<Props, State> {
     )
 
     if (!rule) {
-      return 3600
+      return DEFAULT_SECONDS
     }
 
     return rule.everySeconds
@@ -104,7 +107,7 @@ export default class BucketOverlay extends PureComponent<Props, State> {
     this.setState({bucket})
   }
 
-  private handleChangeRuleType = ruleType => {
+  private handleChangeRuleType = (ruleType: BucketRetentionRules.TypeEnum) => {
     this.setState({ruleType})
   }