feat(Buckets): Create/Edit forms allow for custom retention periods (#5959)

* chore: commit this for now

* feat(Buckets): Create/Edit forms allow for custom retention periods

* fix: lint errors

* fix: text

* feat(Buckets): show full names, (days / months) etc

* chore: styles

* chore: lint

* feat: support plural, remove trailing spaces

* feat: plural suppport, dropdown selected bug fix

* feat: disallow 0 as input

* chore: styling

* chore: prettier

* feat: some error handling

* chore: bring clockface changes in

* chore: lint

* fix: test

* feat: limits for free users

* chore: address comments

* fix: lint

* fix: undo hard coded limit

* fix: imports

* fix: remove styling glitch

* fix: undo limit!

* fix: lint

Author: ChitlangeSahas

package.json

@@ -164,7 +164,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^6.3.7",
+    "@influxdata/clockface": "^6.3.8",
     "@influxdata/flux-lsp-browser": "0.8.35",
     "@influxdata/giraffe": "^2.37.0",
     "@influxdata/influxdb-templates": "0.9.0",

src/buckets/components/Retention.tsx

@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
-import {SelectGroup, ButtonShape} from '@influxdata/clockface'
+import {SelectGroup, ButtonShape, ComponentStatus} from '@influxdata/clockface'
 import DurationSelector, {
   DurationOption,
 } from 'src/shared/components/DurationSelector'
@@ -43,6 +43,7 @@ interface OwnProps {
   onChangeRetentionRule: (seconds: number) => void
   onChangeRuleType: (type: 'expire' | null) => void
   useSimplifiedForm?: boolean
+  status?: ComponentStatus
 }
 
 type Props = OwnProps & StateProps
@@ -54,6 +55,7 @@ class Retention extends PureComponent<Props> {
       maxRetentionSeconds,
       type,
       useSimplifiedForm = false,
+      status,
     } = this.props
 
     return (
@@ -91,6 +93,7 @@ class Retention extends PureComponent<Props> {
             selectedDuration={`${retentionSeconds}s`}
             onSelectDuration={this.handleSelectDuration}
             durations={this.durations}
+            status={status}
           />
         )}
       </>

src/buckets/components/createBucketForm/BucketOverlayForm.tsx

@@ -1,30 +1,44 @@
 // Libraries
-import React, {PureComponent, ChangeEvent, FormEvent} from 'react'
+import React, {ChangeEvent, FormEvent, PureComponent} from 'react'
 
 // Components
-import {Form, Input, Button, Accordion, Overlay} from '@influxdata/clockface'
+// Types
+import {
+  Accordion,
+  BannerPanel,
+  Button,
+  ButtonType,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+  FlexBox,
+  Form,
+  Gradients,
+  InfluxColors,
+  Input,
+  JustifyContent,
+  Overlay,
+} from '@influxdata/clockface'
 import Retention from 'src/buckets/components/Retention'
 import {SchemaToggle} from 'src/buckets/components/createBucketForm/SchemaToggle'
 
 // Constants
 import {
-  isSystemBucket,
   BUCKET_NAME_MINIMUM_CHARACTERS,
+  isSystemBucket,
 } from 'src/buckets/constants'
-
-// Types
-import {
-  ButtonType,
-  ComponentColor,
-  ComponentStatus,
-} from '@influxdata/clockface'
 import {RuleType} from 'src/buckets/reducers/createBucket'
 import {CLOUD} from 'src/shared/constants'
 
 import {
   MeasurementSchemaSection,
   SchemaUpdateInfo,
 } from 'src/buckets/components/createBucketForm/MeasurementSchemaSection'
+import {extractBucketMaxRetentionSeconds} from 'src/cloud/utils/limits'
+import {AppState} from 'src/types'
+import {connect} from 'react-redux'
+import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
+import './BucketOverlayFormStyles.scss'
 
 let MeasurementSchemaList = null,
   MeasurementSchemaCreateRequest = null,
@@ -41,7 +55,7 @@ if (CLOUD) {
  * need the schemaType that is already set;
  * if !isEditing (it is false)
  * then need the 'onChangeSchemaType' method*/
-interface Props {
+interface OwnProps {
   name: string
   retentionSeconds: number
   ruleType: 'expire'
@@ -66,19 +80,27 @@ interface Props {
   useSimplifiedBucketForm?: boolean
 }
 
+interface StateProps {
+  maxRetentionSeconds: number
+}
+
+type Props = OwnProps & StateProps
+
 interface State {
   showAdvanced: boolean
   schemaType: 'implicit' | 'explicit'
   newMeasurementSchemas: typeof MeasurementSchemaCreateRequest[]
   measurementSchemaUpdates: SchemaUpdateInfo[]
+  retentionPeriodMaxReached: boolean
 }
 
-export default class BucketOverlayForm extends PureComponent<Props> {
+class BucketOverlayForm extends PureComponent<Props> {
   public state: State = {
     showAdvanced: false,
     schemaType: 'implicit',
     newMeasurementSchemas: [],
     measurementSchemaUpdates: [],
+    retentionPeriodMaxReached: false,
   }
 
   onChangeSchemaTypeInternal = (newSchemaType: typeof SchemaType) => {
@@ -97,6 +119,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
     this.props.onUpdateMeasurementSchemas(schemas)
     this.setState({measurementSchemaUpdates: schemas})
   }
+  private upgradeBannerStyle = {marginBottom: '28px'}
 
   public render() {
     const {
@@ -197,21 +220,44 @@ export default class BucketOverlayForm extends PureComponent<Props> {
               />
             )}
           </Form.ValidationElement>
-          <Form.Element
+          <Form.ValidationElement
             label={
               useSimplifiedBucketForm
                 ? 'Data Retention Preferences'
                 : 'Delete Data'
             }
+            value={retentionSeconds.toString()}
+            validationFunc={this.handleRetentionSecondsValidation}
+            className="retention--dropdown"
           >
-            <Retention
-              type={ruleType}
-              retentionSeconds={retentionSeconds}
-              onChangeRuleType={onChangeRuleType}
-              onChangeRetentionRule={onChangeRetentionRule}
-              useSimplifiedForm={useSimplifiedBucketForm}
-            />
-          </Form.Element>
+            {status => (
+              <Retention
+                type={ruleType}
+                retentionSeconds={retentionSeconds}
+                onChangeRuleType={onChangeRuleType}
+                onChangeRetentionRule={onChangeRetentionRule}
+                useSimplifiedForm={useSimplifiedBucketForm}
+                status={status}
+              />
+            )}
+          </Form.ValidationElement>
+          {this.state.retentionPeriodMaxReached && (
+            <BannerPanel
+              size={ComponentSize.ExtraSmall}
+              gradient={Gradients.PolarExpress}
+              hideMobileIcon={true}
+              textColor={InfluxColors.Yeti}
+              style={this.upgradeBannerStyle}
+            >
+              <FlexBox
+                justifyContent={JustifyContent.SpaceBetween}
+                stretchToFitWidth={true}
+              >
+                <h6>Need retention period more than 30 days?</h6>
+                <CloudUpgradeButton size={ComponentSize.ExtraSmall} />
+              </FlexBox>
+            </BannerPanel>
+          )}
           {useSimplifiedBucketForm ? null : makeAdvancedSection()}
         </Overlay.Body>
         <Overlay.Footer>
@@ -259,6 +305,19 @@ export default class BucketOverlayForm extends PureComponent<Props> {
     return null
   }
 
+  private handleRetentionSecondsValidation = (value: string): string | null => {
+    const {maxRetentionSeconds} = this.props
+    if (Number(value) <= 0) {
+      return ` `
+    }
+
+    if (maxRetentionSeconds && Number(value) > maxRetentionSeconds) {
+      this.setState({retentionPeriodMaxReached: true})
+      return ' '
+    }
+
+    return null
+  }
   private get nameHelpText(): string {
     if (this.props.isEditing) {
       return 'To rename bucket use the RENAME button below'
@@ -278,13 +337,21 @@ export default class BucketOverlayForm extends PureComponent<Props> {
   }
 
   private get submitButtonStatus(): ComponentStatus {
-    const {name} = this.props
+    const {name, retentionSeconds} = this.props
     const nameHasErrors = this.handleNameValidation(name)
+    const durationHasErrors = this.handleRetentionSecondsValidation(
+      retentionSeconds.toString()
+    )
 
-    if (nameHasErrors) {
+    if (nameHasErrors || durationHasErrors) {
       return ComponentStatus.Disabled
     }
 
     return ComponentStatus.Default
   }
 }
+const mstp = (state: AppState) => ({
+  maxRetentionSeconds: extractBucketMaxRetentionSeconds(state),
+})
+
+export default connect<StateProps, {}, OwnProps>(mstp)(BucketOverlayForm)

src/buckets/components/createBucketForm/BucketOverlayFormStyles.scss

@@ -0,0 +1,5 @@
+.retention--dropdown {
+  .cf-form--element-error {
+    display: none;
+  }
+}

src/shared/components/DurationSelector.test.tsx

@@ -47,7 +47,7 @@ describe('DurationSelector', () => {
     )
 
     expect(
-      getByText(getByTestId('duration-selector--button'), '1h')
+      getByText(getByTestId('duration-selector--button'), '1 hour')
     ).toBeDefined()
   })
 })