feat: add create organization overlay (#6327)

* feat: add create-org overlay to ui

* chore: add types, fix filepath linting issue

* chore: fix sizing of network alert

* chore: fix type, move useEffect hooks up

Author: wdoconnell

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrgInput.scss

@@ -0,0 +1,13 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.create-org-overlay--createorg-input-element {
+  input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: normal !important;
+  }
+}
+
+.create-org-overlay--validation-field-placeholder {
+  height: 20px;
+  width: 200px;
+}

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrgInput.tsx

@@ -0,0 +1,63 @@
+import React, {FC, useState} from 'react'
+import {
+  ComponentSize,
+  ComponentStatus,
+  Form,
+  Input,
+} from '@influxdata/clockface'
+
+// Types
+import {OrgOverlayValidationError} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrganizationOverlay'
+
+// Style
+import './CreateOrgInput.scss'
+
+const formLabel = 'Organization Name'
+
+interface Props {
+  handleValidateOrgName: (orgName: string) => void
+  orgName: string
+  validationMsg: OrgOverlayValidationError
+}
+
+export const CreateOrgInput: FC<Props> = ({
+  handleValidateOrgName,
+  orgName,
+  validationMsg,
+}) => {
+  const [userTouchedFormInput, setUserTouchedFormInput] = useState(false)
+
+  const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    if (!userTouchedFormInput) {
+      setUserTouchedFormInput(true)
+    }
+    handleValidateOrgName(evt.target.value)
+  }
+
+  const showError = validationMsg !== OrgOverlayValidationError.None
+
+  return (
+    <>
+      <Form.Element
+        htmlFor={formLabel}
+        label={formLabel}
+        required={true}
+        errorMessage={validationMsg}
+        className="create-org-overlay--createorg-input-element"
+      >
+        <Form.HelpText text="You may want to create separate organizations for each team, server region, or dev environment." />
+        <Input
+          size={ComponentSize.Medium}
+          onChange={handleInputChange}
+          value={orgName}
+          required={true}
+          status={showError ? ComponentStatus.Error : ComponentStatus.Default}
+          placeholder="Dev Team, US Eastern Region, Staging"
+        />
+      </Form.Element>
+      {!showError && (
+        <div className="create-org-overlay--validation-field-placeholder" />
+      )}
+    </>
+  )
+}

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrganizationOverlay.scss

@@ -0,0 +1,58 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.create-org-overlay--provider-box {
+  display: flex;
+  flex: 1;
+  margin: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+  max-width: 350px;
+
+  > .create-org-overlay--provider-box-logo {
+    display: flex;
+    align-items: center;
+    height: 120px;
+    width: 100%;
+  }
+}
+
+.create-org-overlay--network-alert {
+  margin-bottom: 12px;
+}
+
+.create-org-overlay--provider-and-region-chooser {
+  margin: 8px 0px;
+  display: flex;
+
+  > .create-org-overlay--org-name {
+    margin: 0px !important;
+    > .create-org-overlay--help-text {
+      margin: 0px 0 !important;
+    }
+  }
+
+  > .create-org-overlay--region-info {
+    margin: 0px;
+  }
+
+  .create-org-overlay--selectable-provider {
+    margin: 15px 5px;
+    height: 200px;
+
+    &:last-child {
+      margin-right: 0px;
+    }
+    &:first-child {
+      margin-left: 0px;
+    }
+
+    &.selected {
+      border-color: red;
+    }
+  }
+}
+
+.create-org-overlay--loading-spinner {
+  width: 800px;
+  height: 50%;
+}