feat: make a cell editor it's own page (#4738)

Author: drdelambre

src/buckets/components/BucketCard.tsx

@@ -61,7 +61,6 @@ const BucketCard: FC<Props> = ({
       <BucketCardMeta bucket={bucket} />
       <BucketCardActions
         bucket={bucket}
-        orgID={orgID}
         bucketType={bucket.type}
         onFilterChange={onFilterChange}
         onGetSchema={onGetBucketSchema}

src/buckets/components/BucketCardActions.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {FC} from 'react'
-import {RouteComponentProps, withRouter} from 'react-router-dom'
 import {connect, ConnectedProps} from 'react-redux'
+import {useHistory, useParams} from 'react-router-dom'
 
 // Components
 import {
@@ -31,28 +31,27 @@ import {CLOUD} from 'src/shared/constants'
 interface OwnProps {
   bucket: OwnBucket
   bucketType: OwnBucket['type']
-  orgID: string
   onFilterChange: (searchTerm: string) => void
   onGetSchema: (b: OwnBucket) => void
 }
 
 type ReduxProps = ConnectedProps<typeof connector>
-type RouterProps = RouteComponentProps<{orgID: string}>
-type Props = OwnProps & ReduxProps & RouterProps
+type Props = OwnProps & ReduxProps
 
 const BucketCardActions: FC<Props> = ({
   bucket,
   bucketType,
-  orgID,
   onFilterChange,
   onGetSchema,
   onAddBucketLabel,
   onDeleteBucketLabel,
-  history,
   onSetDataLoadersBucket,
   onSetDataLoadersType,
   setLocationOnDismiss,
 }) => {
+  const history = useHistory()
+  const {orgID} = useParams<{orgID: string}>()
+
   if (bucketType === 'system') {
     return null
   }
@@ -163,4 +162,4 @@ const mdtp = {
 
 const connector = connect(null, mdtp)
 
-export default connector(withRouter(BucketCardActions))
+export default connector(BucketCardActions)

src/buckets/components/createBucketForm/UpdateBucketOverlay.tsx

@@ -7,8 +7,8 @@ import React, {
   FormEvent,
   useCallback,
 } from 'react'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
-import {connect, ConnectedProps, useDispatch} from 'react-redux'
+import {useParams, useHistory} from 'react-router-dom'
+import {useDispatch, useSelector} from 'react-redux'
 import {get} from 'lodash'
 
 // Components
@@ -48,6 +48,7 @@ import {
 import {SchemaUpdateInfo} from 'src/buckets/components/createBucketForm/MeasurementSchemaSection'
 
 import {getBucketOverlayWidth} from 'src/buckets/constants'
+import {getOrg} from 'src/organizations/selectors'
 
 let SchemaType = null,
   MeasurementSchemaCreateRequest = null
@@ -58,25 +59,10 @@ if (CLOUD) {
     .MeasurementSchemaCreateRequest
 }
 
-interface DispatchProps {
-  onUpdateBucket: typeof updateBucket
-  getSchema: typeof getBucketSchema
-  onAddMeasurementSchemaToBucket: typeof addSchemaToBucket
-  updateSchema: typeof updateMeasurementSchema
-}
-
-type ReduxProps = ConnectedProps<typeof connector>
-type Props = ReduxProps & RouteComponentProps<{bucketID: string; orgID: string}>
-
-const UpdateBucketOverlay: FunctionComponent<Props> = ({
-  onUpdateBucket,
-  getSchema,
-  onAddMeasurementSchemaToBucket,
-  updateSchema,
-  match,
-  history,
-}) => {
-  const {orgID, bucketID} = match.params
+const UpdateBucketOverlay: FunctionComponent = () => {
+  const history = useHistory()
+  const {bucketID} = useParams<{bucketID: string}>()
+  const orgID = useSelector(getOrg).id
   const dispatch = useDispatch()
   const [bucketDraft, setBucketDraft] = useState<OwnBucket>(null)
 
@@ -114,7 +100,7 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
       setSchemaType(resp.data.schemaType)
 
       if ('explicit' === resp.data.schemaType) {
-        const schema = await getSchema(bucketID)
+        const schema = await dispatch(getBucketSchema(bucketID))
         setMeasurementSchemaList(schema)
       }
 
@@ -192,7 +178,7 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
     e.preventDefault()
 
     if (isValid()) {
-      onUpdateBucket(bucketDraft)
+      dispatch(updateBucket(bucketDraft))
 
       if (newMeasurementSchemaRequests?.length) {
         newMeasurementSchemaRequests.forEach(item => {
@@ -202,11 +188,13 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
           }
 
           event('bucket.schema.explicit.editing.uploadSchema')
-          onAddMeasurementSchemaToBucket(
-            bucketDraft.id,
-            bucketDraft.orgID,
-            bucketDraft.name,
-            createRequest
+          dispatch(
+            addSchemaToBucket(
+              bucketDraft.id,
+              bucketDraft.orgID,
+              bucketDraft.name,
+              createRequest
+            )
           )
         })
       }
@@ -219,7 +207,9 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
             const {bucketID, id, name, orgID} = currentSchema
             const updateRequest = {columns}
             event('bucket.schema.explicit.editing.updateSchema')
-            updateSchema(bucketID, id, name, updateRequest, orgID)
+            dispatch(
+              updateMeasurementSchema(bucketID, id, name, updateRequest, orgID)
+            )
           })
       }
 
@@ -278,16 +268,4 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
   )
 }
 
-const mdtp = {
-  onUpdateBucket: updateBucket,
-  getSchema: getBucketSchema,
-  onAddMeasurementSchemaToBucket: addSchemaToBucket,
-  updateSchema: updateMeasurementSchema,
-}
-
-const connector = connect(null, mdtp)
-
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(withRouter(UpdateBucketOverlay))
+export default UpdateBucketOverlay

src/checks/components/CheckCard.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {MouseEvent, FC} from 'react'
-import {connect, ConnectedProps} from 'react-redux'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
+import {connect, ConnectedProps, useSelector} from 'react-redux'
+import {useHistory} from 'react-router-dom'
 
 // Components
 import {
@@ -48,13 +48,14 @@ import {event} from 'src/cloud/utils/reporting'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {shouldOpenLinkInNewTab} from 'src/utils/crossPlatform'
 import {safeBlankLinkOpen} from 'src/utils/safeBlankLinkOpen'
+import {getOrg} from 'src/organizations/selectors'
 
 interface OwnProps {
   check: Check
 }
 
 type ReduxProps = ConnectedProps<typeof connector>
-type Props = OwnProps & ReduxProps & RouteComponentProps<{orgID: string}>
+type Props = OwnProps & ReduxProps
 
 const CheckCard: FC<Props> = ({
   onRemoveCheckLabel,
@@ -64,11 +65,9 @@ const CheckCard: FC<Props> = ({
   check,
   onUpdateCheckDisplayProperties,
   deleteCheck,
-  match: {
-    params: {orgID},
-  },
-  history,
 }) => {
+  const history = useHistory()
+  const orgID = useSelector(getOrg).id
   const {activeStatus, description, id, name, taskID} = check
 
   const checkUrl = `/orgs/${orgID}/alerting/checks/${id}/edit`
@@ -231,4 +230,4 @@ const mdtp = {
 
 const connector = connect(null, mdtp)
 
-export default connector(withRouter(CheckCard))
+export default connector(CheckCard)

src/checks/components/ChecksColumn.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
-import {connect, ConnectedProps} from 'react-redux'
+import {useHistory} from 'react-router-dom'
+import {connect, ConnectedProps, useSelector} from 'react-redux'
 
 // Selectors
 import {getAll} from 'src/resources/selectors'
@@ -28,25 +28,24 @@ import {
 
 // Utils
 import {extractChecksLimits} from 'src/cloud/utils/limits'
+import {getOrg} from 'src/organizations/selectors'
 
 interface OwnProps {
   tabIndex: number
 }
 
 type ReduxProps = ConnectedProps<typeof connector>
-type Props = OwnProps & ReduxProps & RouteComponentProps<{orgID: string}>
+type Props = OwnProps & ReduxProps
 
 const ChecksColumn: FunctionComponent<Props> = ({
   checks,
-  history,
-  match: {
-    params: {orgID},
-  },
   rules,
   endpoints,
   limitStatus,
   tabIndex,
 }) => {
+  const history = useHistory()
+  const orgID = useSelector(getOrg).id
   const handleCreateThreshold = () => {
     history.push(`/orgs/${orgID}/alerting/checks/new-threshold`)
   }
@@ -129,4 +128,4 @@ const mstp = (state: AppState) => {
 
 const connector = connect(mstp)
 
-export default connector(withRouter(ChecksColumn))
+export default connector(ChecksColumn)

src/checks/components/EditCheckEO.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {FunctionComponent, useEffect} from 'react'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
-import {connect, ConnectedProps, useDispatch} from 'react-redux'
+import {useParams, useHistory} from 'react-router-dom'
+import {connect, ConnectedProps, useDispatch, useSelector} from 'react-redux'
 import {get} from 'lodash'
 
 // Components
@@ -22,24 +22,23 @@ import {resetAlertBuilder, updateName} from 'src/alerting/actions/alertBuilder'
 
 // Types
 import {AppState, RemoteDataState} from 'src/types'
+import {getOrg} from 'src/organizations/selectors'
 
-type ReduxProps = ConnectedProps<typeof connector>
-type Props = RouteComponentProps<{orgID: string; checkID: string}> & ReduxProps
+type Props = ConnectedProps<typeof connector>
 
 const EditCheckEditorOverlay: FunctionComponent<Props> = ({
   onUpdateAlertBuilderName,
   onResetAlertBuilder,
   onSaveCheckFromTimeMachine,
   activeTimeMachineID,
   status,
-  history,
-  match: {
-    params: {checkID, orgID},
-  },
   checkName,
   loadedCheckID,
   view,
 }) => {
+  const history = useHistory()
+  const {checkID} = useParams<{checkID}>()
+  const orgID = useSelector(getOrg).id
   const dispatch = useDispatch()
   const query = get(view, 'properties.queries[0]', null)
 
@@ -116,4 +115,4 @@ const mdtp = {
 
 const connector = connect(mstp, mdtp)
 
-export default connector(withRouter(EditCheckEditorOverlay))
+export default connector(EditCheckEditorOverlay)