feat: make BucketOverlayForm to have a useSimplifiedBucketForm prop (#4190)

Author: ChitlangeSahas

src/buckets/components/CreateBucketButton.tsx

@@ -21,19 +21,29 @@ import {CLOUD} from 'src/shared/constants'
 
 type ReduxProps = ConnectedProps<typeof connector>
 
-const CreateBucketButton: FC<ReduxProps> = ({
+type CreateButtonProps = {
+  useSimplifiedBucketForm?: boolean
+}
+
+type Props = ReduxProps & CreateButtonProps
+
+const CreateBucketButton: FC<Props> = ({
   limitStatus,
   onShowOverlay,
   onDismissOverlay,
+  useSimplifiedBucketForm = false,
 }) => {
   const dispatch = useDispatch()
   useEffect(() => {
     // Check bucket limits when component mounts
     dispatch(checkBucketLimits())
   }, [dispatch])
 
+  const overlayParams = useSimplifiedBucketForm
+    ? {useSimplifiedBucketForm: true}
+    : null
   const handleItemClick = (): void => {
-    onShowOverlay('create-bucket', null, onDismissOverlay)
+    onShowOverlay('create-bucket', overlayParams, onDismissOverlay)
   }
 
   if (CLOUD && limitStatus === 'exceeded') {

src/buckets/components/Retention.tsx

@@ -42,13 +42,19 @@ interface OwnProps {
   type: 'expire'
   onChangeRetentionRule: (seconds: number) => void
   onChangeRuleType: (type: 'expire' | null) => void
+  useSimplifiedForm?: boolean
 }
 
 type Props = OwnProps & StateProps
 
 class Retention extends PureComponent<Props> {
   public render() {
-    const {retentionSeconds, maxRetentionSeconds, type} = this.props
+    const {
+      retentionSeconds,
+      maxRetentionSeconds,
+      type,
+      useSimplifiedForm = false,
+    } = this.props
 
     return (
       <>
@@ -66,7 +72,7 @@ class Retention extends PureComponent<Props> {
             titleText="Never delete data"
             disabled={!!maxRetentionSeconds}
           >
-            Never
+            Never {useSimplifiedForm && <> Delete</>}
           </SelectGroup.Option>
           <SelectGroup.Option
             name="bucket-retention"
@@ -77,7 +83,7 @@ class Retention extends PureComponent<Props> {
             testID="retention-intervals--button"
             titleText="Delete data older than a duration"
           >
-            Older Than
+            {useSimplifiedForm && <>Delete </>} Older Than
           </SelectGroup.Option>
         </SelectGroup>
         {type === 'expire' && (

src/buckets/components/createBucketForm/BucketOverlayForm.tsx

@@ -63,6 +63,7 @@ interface Props {
   schemaType?: typeof SchemaType
   measurementSchemaList?: typeof MeasurementSchemaList
   showSchemaValidation?: boolean
+  useSimplifiedBucketForm?: boolean
 }
 
 interface State {
@@ -114,6 +115,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
       schemaType: readOnlySchemaType,
       measurementSchemaList,
       showSchemaValidation,
+      useSimplifiedBucketForm = false,
     } = this.props
 
     const {showAdvanced, schemaType} = this.state
@@ -195,15 +197,22 @@ export default class BucketOverlayForm extends PureComponent<Props> {
               />
             )}
           </Form.ValidationElement>
-          <Form.Element label="Delete Data">
+          <Form.Element
+            label={
+              useSimplifiedBucketForm
+                ? 'Data Retention Preferences'
+                : 'Delete Data'
+            }
+          >
             <Retention
               type={ruleType}
               retentionSeconds={retentionSeconds}
               onChangeRuleType={onChangeRuleType}
               onChangeRetentionRule={onChangeRetentionRule}
+              useSimplifiedForm={useSimplifiedBucketForm}
             />
           </Form.Element>
-          {makeAdvancedSection()}
+          {useSimplifiedBucketForm ? null : makeAdvancedSection()}
         </Overlay.Body>
         <Overlay.Footer>
           <Button

src/buckets/components/createBucketForm/CreateBucketForm.tsx

@@ -39,10 +39,15 @@ if (CLOUD) {
 interface CreateBucketFormProps {
   onClose: () => void
   testID?: string
+  useSimplifiedBucketForm?: boolean
 }
 
 export const CreateBucketForm: FC<CreateBucketFormProps> = props => {
-  const {onClose, testID = 'create-bucket-form'} = props
+  const {
+    onClose,
+    testID = 'create-bucket-form',
+    useSimplifiedBucketForm = false,
+  } = props
   const org = useSelector(getOrg)
   const isRetentionLimitEnforced = useSelector((state: AppState): boolean => {
     if (CLOUD) {
@@ -177,6 +182,7 @@ export const CreateBucketForm: FC<CreateBucketFormProps> = props => {
       onChangeSchemaType={handleChangeSchemaType}
       onAddNewMeasurementSchemas={handleNewMeasurementSchemas}
       showSchemaValidation={showSchemaValidation}
+      useSimplifiedBucketForm={useSimplifiedBucketForm}
     />
   )
 }

src/buckets/components/createBucketForm/CreateBucketOverlay.tsx

@@ -12,11 +12,16 @@ import {OverlayContext} from 'src/overlays/components/OverlayController'
 import {getBucketOverlayWidth} from 'src/buckets/constants'
 
 const CreateBucketOverlay: FC = () => {
-  const {onClose} = useContext(OverlayContext)
+  const {onClose, params} = useContext(OverlayContext)
+  const useSimplifiedBucketForm = params?.useSimplifiedBucketForm
+
   return (
     <Overlay.Container maxWidth={getBucketOverlayWidth()}>
       <Overlay.Header title="Create Bucket" onDismiss={onClose} />
-      <CreateBucketForm onClose={onClose} />
+      <CreateBucketForm
+        onClose={onClose}
+        useSimplifiedBucketForm={useSimplifiedBucketForm}
+      />
     </Overlay.Container>
   )
 }

src/homepageExperience/components/steps/WriteData.tsx

@@ -78,7 +78,7 @@ export const WriteDataComponent = (props: WriteDataProps) => {
           <Grid>
             <Grid.Row>
               <Grid.Column widthSM={Columns.Twelve}>
-                <WriteDataHelperBuckets />
+                <WriteDataHelperBuckets useSimplifiedBucketForm={true} />
               </Grid.Column>
             </Grid.Row>
           </Grid>

src/writeData/components/WriteDataHelperBuckets.tsx

@@ -28,10 +28,12 @@ import {AppState, ResourceType, Bucket} from 'src/types'
 
 interface Props {
   className?: string
+  useSimplifiedBucketForm?: boolean
 }
 
 const WriteDataHelperBuckets: FC<Props> = ({
   className = 'write-data--details-widget-title',
+  useSimplifiedBucketForm = false,
 }) => {
   const buckets = useSelector((state: AppState) =>
     getAll<Bucket>(state, ResourceType.Buckets).filter(b => b.type === 'user')
@@ -89,7 +91,7 @@ const WriteDataHelperBuckets: FC<Props> = ({
     <>
       <Heading element={HeadingElement.H6} className={className}>
         Bucket
-        <CreateBucketButton />
+        <CreateBucketButton useSimplifiedBucketForm={useSimplifiedBucketForm} />
       </Heading>
       {body}
     </>