diff --git a/src/cloud/components/SeriesCardinalityIncreaseForm.tsx b/src/cloud/components/SeriesCardinalityIncreaseForm.tsx index b66dea20c6..d4d0919ead 100644 --- a/src/cloud/components/SeriesCardinalityIncreaseForm.tsx +++ b/src/cloud/components/SeriesCardinalityIncreaseForm.tsx @@ -1,41 +1,97 @@ // Libraries -import React, {FC} from 'react' +import React, {FC, useState} from 'react' +import {useDispatch, useSelector} from 'react-redux' // Components import { Form, - Button, Heading, + TextArea, + Button, + ButtonType, ButtonShape, InfluxColors, ComponentSize, ComponentColor, HeadingElement, + ComponentStatus, } from '@influxdata/clockface' +// Actions +import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays' + +// Selectors +import {selectQuartzIdentity} from 'src/identity/selectors' + export const SeriesCardinalityIncreaseForm: FC = () => { + const dispatch = useDispatch() + const quartzIdentity = useSelector(selectQuartzIdentity) + const {org: identityOrg} = quartzIdentity.currentIdentity + + const [requestDetails, setRequestDetails] = useState('') + + const handleDetailsValidation = (value: string): string | null => { + if (!value) { + return 'Request details are required' + } + return null + } + + const isFormValid = (): boolean => { + return Boolean(requestDetails) + } + const handleSubmit = (): void => { - window.open(`https://support.influxdata.com/s/login`) + const orgName = identityOrg.name + const orgID = identityOrg.id + + dispatch( + showOverlay( + 'contact-support', + { + subject: `[Org: ${orgName}] [Org Id: ${orgID}] Request Series Cardinality Limit Increase`, + description: requestDetails, + }, + dismissOverlay + ) + ) } return ( -
+
Request Series Cardinality Limit Increase -

- To request a series cardinality limit increase, please contact our - support team. -

+ + {status => ( +