feat(3619): regional-specific, cluster info into Org about page (#3674)

Author: wiedld

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=1a263ef19a48e03100c7e8006ee76b3a8e6e932e && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=7227887eaec5dfcab6774209e660eb797dd9efac && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
     "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv",

src/flows/pipes/Region/view.tsx

@@ -61,12 +61,6 @@ export const REGIONS = [
     flag: 'local-dev',
     value: 'https://influxdb.aws.influxdata.io',
   },
-  {
-    label: 'Local Kind Cluster',
-    group: 'Development',
-    flag: 'local-dev',
-    value: 'https://twodotoh.a.influxcloud.dev.local',
-  },
   {label: 'Current Region', value: 'self'},
   {label: 'Self Hosted', value: 'self-hosted'},
 ]

src/organizations/components/OrgProfileTab.tsx

@@ -0,0 +1,79 @@
+// Libraries
+import React, {FC} from 'react'
+import {useDispatch} from 'react-redux'
+
+// Components
+import {
+  FlexBox,
+  ComponentSize,
+  Heading,
+  HeadingElement,
+  FontWeight,
+  JustifyContent,
+} from '@influxdata/clockface'
+import CopyButton from 'src/shared/components/CopyButton'
+
+// Actions
+import {notify} from 'src/shared/actions/notifications'
+
+// Utils
+import {copyToClipboardSuccess} from 'src/shared/copy/notifications'
+import 'src/organizations/components/OrgProfileTab/style.scss'
+
+interface Props {
+  id: string
+  label: string
+  src: string
+  name?: string
+}
+
+const CopyableLabeledData: FC<Props> = ({id, label, src, name}) => {
+  const dispatch = useDispatch()
+  const generateCopyText = () => {
+    dispatch(notify(copyToClipboardSuccess(label, src)))
+  }
+
+  return (
+    <>
+      <Heading
+        element={HeadingElement.H4}
+        className="org-profile-tab--heading"
+        weight={FontWeight.Regular}
+      >
+        {label}
+      </Heading>
+      <div
+        className="code-snippet org-profile-tab--copyableText"
+        data-testid={`code-snippet--${id}`}
+      >
+        <div className="code-snippet--text">
+          <pre>
+            <code>{src}</code>
+          </pre>
+        </div>
+        <FlexBox
+          className="code-snippet--footer"
+          margin={ComponentSize.Medium}
+          stretchToFitWidth={true}
+          justifyContent={JustifyContent.SpaceBetween}
+        >
+          <CopyButton
+            text={src}
+            testID={`copy-btn--${id}`}
+            onCopy={generateCopyText}
+          />
+          {name && (
+            <label
+              className="code-snippet--label"
+              data-testid="org-profile--name"
+            >
+              {`${name} |`} <b>{label}</b>
+            </label>
+          )}
+        </FlexBox>
+      </div>
+    </>
+  )
+}
+
+export default CopyableLabeledData

src/organizations/components/OrgProfileTab/CopyableLabeledData.tsx

@@ -22,7 +22,9 @@ import {event} from 'src/cloud/utils/reporting'
 import {getQuartzMe} from 'src/me/selectors'
 import {NotificationButtonElement} from 'src/types'
 
-const OrgProfileTab: FC = () => {
+import 'src/organizations/components/OrgProfileTab/style.scss'
+
+const DeletePanel: FC = () => {
   const quartzMe = useSelector(getQuartzMe)
   const org = useSelector(getOrg)
   const history = useHistory()
@@ -65,8 +67,8 @@ const OrgProfileTab: FC = () => {
         {CLOUD && quartzMe?.accountType === 'free' && (
           <>
             <FlexBox.Child>
-              <h4 style={{marginBottom: '4px'}}>Delete Organization</h4>
-              <p style={{margin: '0px'}}>
+              <h4>Delete Organization</h4>
+              <p className="org-profile-tab--heading org-profile-tab--deleteHeading">
                 Delete your Free InfluxDB Cloud account and remove any data that
                 you have loaded.
               </p>
@@ -86,4 +88,4 @@ const OrgProfileTab: FC = () => {
   )
 }
 
-export default OrgProfileTab
+export default DeletePanel

src/organizations/components/OrgProfileDeletePanel.tsx renamed to src/organizations/components/OrgProfileTab/DeletePanel.tsx

@@ -0,0 +1,37 @@
+// Libraries
+import React, {FC} from 'react'
+
+// Components
+import {
+  FlexBox,
+  AlignItems,
+  FlexDirection,
+  ComponentSize,
+  Heading,
+  HeadingElement,
+  FontWeight,
+} from '@influxdata/clockface'
+
+interface Props {
+  label: string
+  src: string
+}
+
+const LabeledData: FC<Props> = ({label, src}) => (
+  <FlexBox
+    direction={FlexDirection.Column}
+    margin={ComponentSize.Large}
+    alignItems={AlignItems.FlexStart}
+  >
+    <Heading
+      className="org-profile-tab--heading"
+      element={HeadingElement.H4}
+      weight={FontWeight.Regular}
+    >
+      {label}
+    </Heading>
+    <span style={{fontWeight: FontWeight.Light, width: '100%'}}>{src}</span>
+  </FlexBox>
+)
+
+export default LabeledData