feat: update support request references in C2 UI

cypress/e2e/cloud/org-list.test.ts

@@ -58,21 +58,18 @@ describe('Account / Organizations Tab', () => {
     cy.get('.account--organizations-tab-suspended-orgs-card')
       .should('have.length', 1)
       .and('be.visible')
-      .within(() => {
-        cy.getByTestID('question-mark-tooltip').click()
-        cy.contains('Deletion in progress')
-      })
+      .contains('Deletion in progress')
 
-    cy.getByTestID('question-mark-tooltip--tooltip--dialog').contains(
-      'Organizations can be reactivated within 7 days of deletion.'
-    )
+    cy.getByTestID('question-mark-tooltip').click()
 
     cy.getByTestID('question-mark-tooltip--tooltip--dialog').within(() => {
-      cy.get('a')
-        .contains('https://support.influxdata.com/s/login')
-        .should('have.attr', 'href', 'https://support.influxdata.com/s/login')
+      cy.get('button').contains('contact support').trigger('click')
     })
 
+    cy.getByTestID('contact-support-overlay-header').should('exist')
+
+    cy.contains('button', 'Cancel').click()
+
     cy.getByTestID('pagination-item')
       .should('have.length', 2)
       .contains('2')

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 (
-    <div>
+    <Form onSubmit={handleSubmit}>
       <Form.Divider lineColor={InfluxColors.Grey15} />
       <Heading element={HeadingElement.H4}>
         Request Series Cardinality Limit Increase
       </Heading>
-      <p>
-        To request a series cardinality limit increase, please contact our
-        support team.
-      </p>
+      <Form.ValidationElement
+        label="Request Details"
+        validationFunc={handleDetailsValidation}
+        value={requestDetails}
+        required={true}
+      >
+        {status => (
+          <TextArea
+            name="Request Details"
+            placeholder="Tell us how much series cardinality you need, your use-case details, what you've tried so far, and why you need an increase."
+            status={status}
+            value={requestDetails}
+            onChange={e => setRequestDetails(e.target.value)}
+            testID="cardinality-request-details"
+            rows={10}
+          />
+        )}
+      </Form.ValidationElement>
       <Button
         shape={ButtonShape.Default}
-        onClick={handleSubmit}
+        type={ButtonType.Submit}
         size={ComponentSize.Medium}
         color={ComponentColor.Primary}
         className="rate-alert--request-increase-button"
-        text="Submit Request"
+        text="Create Request"
+        status={
+          isFormValid() ? ComponentStatus.Default : ComponentStatus.Disabled
+        }
       />
-    </div>
+    </Form>
   )
 }

src/cloud/components/WriteLimitOverlay.tsx

@@ -1,33 +1,55 @@
-import React, {useContext, FC} from 'react'
+import React, {useState, useContext, FC} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
 
 import {
   OverlayContainer,
   Overlay,
+  Form,
   Heading,
+  Input,
   HeadingElement,
   Button,
   ButtonType,
   ButtonShape,
   ComponentSize,
   ComponentColor,
+  ComponentStatus,
+  InputType,
 } from '@influxdata/clockface'
 
 import {OverlayContext} from 'src/overlays/components/OverlayController'
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 
-// Reporting
-import {event} from 'src/cloud/utils/reporting'
+// Selectors
+import {selectQuartzIdentity} from 'src/identity/selectors'
 
 // Design
 import './WriteLimitOverlay.scss'
 
 const WriteLimitOverlay: FC = () => {
+  const [limitReason, setLimitReason] = useState('')
+
   const {onClose} = useContext(OverlayContext)
+  const dispatch = useDispatch()
+  const quartzIdentity = useSelector(selectQuartzIdentity)
+  const {org: identityOrg} = quartzIdentity.currentIdentity
 
   const handleSubmit = (): void => {
-    event('limit.requestincrease.writes')
+    const orgName = identityOrg.name
+    const orgID = identityOrg.id
 
-    window.open(`https://support.influxdata.com/s/login`)
+    dispatch(
+      showOverlay(
+        'contact-support',
+        {
+          subject: `[Org: ${orgName}] [Org Id: ${orgID}] Request Query Write Limit Increase`,
+          description: limitReason,
+        },
+        dismissOverlay
+      )
+    )
   }
+
   return (
     <OverlayContainer
       maxWidth={760}
@@ -40,19 +62,28 @@ const WriteLimitOverlay: FC = () => {
         wrapText={true}
       />
       <Overlay.Body className="limits-increasewrites--body">
-        <div className="limits-increasewrites--form">
+        <Form onSubmit={handleSubmit} className="limits-increasewrites--form">
           <Heading element={HeadingElement.H4}>
             Request Query Write Limit Increase
           </Heading>
-          <p>
-            To request a write limit increase, please contact our support team.
-          </p>
-        </div>
+          <Form.Element label="Request Details" required={true}>
+            <Input
+              name="Write Limit Increase"
+              placeholder="Tell us how much you need your write limit raised and your use-case details"
+              required={true}
+              autoFocus={true}
+              value={limitReason}
+              onChange={e => setLimitReason(e.target.value)}
+              testID="rate-alert-form-amount"
+              type={InputType.Text}
+            />
+          </Form.Element>
+        </Form>
       </Overlay.Body>
       <Overlay.Footer>
         <Button
           shape={ButtonShape.Default}
-          type={ButtonType.Submit}
+          type={ButtonType.Button}
           size={ComponentSize.Medium}
           color={ComponentColor.Tertiary}
           text="Cancel"
@@ -64,7 +95,12 @@ const WriteLimitOverlay: FC = () => {
           size={ComponentSize.Medium}
           color={ComponentColor.Primary}
           className="rate-alert--request-increase-button"
-          text="Submit Request"
+          text="Create Request"
+          status={
+            limitReason.length
+              ? ComponentStatus.Default
+              : ComponentStatus.Disabled
+          }
         />
       </Overlay.Footer>
     </OverlayContainer>

src/cloud/constants/index.ts

@@ -1,12 +1,12 @@
 export const RATE_LIMIT_ERROR_STATUS = 429
 
 export const RATE_LIMIT_ERROR_TEXT =
-  'Oops. It looks like you have exceeded the query limits allowed as part of your plan. If you would like to increase your query limits, reach out at support.influxdata.com.'
+  'Oops. It looks like you have exceeded the query limits allowed as part of your plan. If you would like to increase your query limits, please use the Contact Support option in the Help menu.'
 
 export const ASSET_LIMIT_ERROR_STATUS = 403
 
 export const ASSET_LIMIT_ERROR_TEXT =
-  'Oops. It looks like you have exceeded the asset limits allowed as part of your plan. If you would like to increase your limits, reach out at support.influxdata.com.'
+  'Oops. It looks like you have exceeded the asset limits allowed as part of your plan. If you would like to increase your limits, please use the Contact Support option in the Help menu.'
 
 export const REQUEST_TIMEOUT_STATUS = 408
 export const GATEWAY_TIMEOUT_STATUS = 504

src/identity/components/OrganizationListTab/OrganizationCard.tsx

@@ -1,4 +1,5 @@
 import React, {FC} from 'react'
+import {useDispatch} from 'react-redux'
 import {
   FlexBox,
   FlexDirection,
@@ -7,8 +8,8 @@ import {
   ResourceCard,
 } from '@influxdata/clockface'
 
-// Utils
-import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+// Actions
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 
 // Styles
 import './OrganizationCard.scss'
@@ -22,17 +23,6 @@ interface OrgCardProps {
   regionName: string
 }
 
-const tooltipContent = (
-  <p>
-    Organizations can be reactivated within 7 days of deletion. Contact support
-    at{' '}
-    <SafeBlankLink href="https://support.influxdata.com/s/login">
-      https://support.influxdata.com/s/login
-    </SafeBlankLink>{' '}
-    to reactivate.
-  </p>
-)
-
 export const OrganizationCard: FC<OrgCardProps> = ({
   name,
   isActive,
@@ -41,8 +31,33 @@ export const OrganizationCard: FC<OrgCardProps> = ({
   regionCode,
   regionName,
 }) => {
+  const dispatch = useDispatch()
   const isOrgSuspended = provisioningStatus === 'suspended'
 
+  const handleContactSupport = () => {
+    dispatch(showOverlay('contact-support', null, dismissOverlay))
+  }
+
+  const tooltipContent = (
+    <p>
+      Organizations can be reactivated within 7 days of deletion. Please{' '}
+      <button
+        onClick={handleContactSupport}
+        style={{
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          color: 'inherit',
+          textDecoration: 'underline',
+          cursor: 'pointer',
+        }}
+      >
+        contact support
+      </button>{' '}
+      to reactivate.
+    </p>
+  )
+
   return (
     <ResourceCard
       className={
@@ -83,6 +98,7 @@ export const OrganizationCard: FC<OrgCardProps> = ({
               <QuestionMarkTooltip
                 diameter={15}
                 tooltipContents={tooltipContent}
+                testID="question-mark-tooltip"
               />
             </>
           )}

src/onboarding/containers/LoginPageContents.tsx

@@ -245,7 +245,7 @@ class LoginPageContents extends PureComponent<Props> {
       this.setState({...errors, emailError})
     } else {
       const emailError =
-        'We have been notified of an issue while accessing your account. If this issue persists, please contact support at support.influxdata.com'
+        'We have been notified of an issue while accessing your account. If this issue persists, please use the Contact Support option in the Help menu'
       this.setState({...errors, emailError})
     }
   }