Fe add organization creation (canada-ca#2290)

* Button on admin page brings users to CreateOrganizationPage.js

* Added FormControl to all input fields, added validation schema for acronyms

* Centered "No admin orgs" screen

* translations

* added AcronymField.js and validation errors appear

* Removed unneeded Form Error Messages

* Add tests

* input placeholders

* changed toast to display org name instead of slug

* more tests

* move test into proper describe

* All fields now have labels and validation schema

* translation for required field

* htmlFor={name} added to CreateOrganizationField.js

Author: lcampbell2

frontend/src/AdminPage.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Stack, Text, Select, useToast } from '@chakra-ui/core'
+import { Stack, Text, Select, useToast, Icon, Divider } from '@chakra-ui/core'
 import { Trans, t } from '@lingui/macro'
 import { Layout } from './Layout'
 import AdminPanel from './AdminPanel'
@@ -8,6 +8,8 @@ import { useQuery } from '@apollo/client'
 import { useUserState } from './UserState'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { LoadingMessage } from './LoadingMessage'
+import { TrackerButton } from './TrackerButton'
+import { Link as RouteLink } from 'react-router-dom'
 
 export default function AdminPage() {
   const { currentUser } = useUserState()
@@ -90,7 +92,7 @@ export default function AdminPage() {
           <Text fontSize="4xl" fontWeight="bold" textAlign={['center', 'left']}>
             <Trans>Welcome, Admin</Trans>
           </Text>
-          <Stack isInline align="center">
+          <Stack flexDirection={['column', 'row']} align="center">
             <Text fontWeight="bold" fontSize="2xl">
               <Trans>Organization: </Trans>
             </Text>
@@ -105,6 +107,16 @@ export default function AdminPage() {
             >
               {options}
             </Select>
+            <TrackerButton
+              ml={['0', 'auto']}
+              w={['100%', 'auto']}
+              variant="primary"
+              as={RouteLink}
+              to="/create-organization"
+            >
+              <Icon name="add" />
+              <Trans>Create Organization</Trans>
+            </TrackerButton>
           </Stack>
           {options.length > 1 && orgDetails ? (
             <Stack>
@@ -125,9 +137,23 @@ export default function AdminPage() {
     )
   } else {
     return (
-      <Text fontSize="3xl" fontWeight="bold" textAlign="center">
-        <Trans>You do not have admin permissions in any organization</Trans>
-      </Text>
+      <Layout>
+        <Stack align="center">
+          <Text fontSize="3xl" fontWeight="bold" textAlign="center">
+            <Trans>You do not have admin permissions in any organization</Trans>
+          </Text>
+          <Divider />
+          <TrackerButton
+            w={['100%', 'auto']}
+            variant="primary"
+            as={RouteLink}
+            to="/create-organization"
+          >
+            <Icon name="add" />
+            <Trans>Create Organization</Trans>
+          </TrackerButton>
+        </Stack>
+      </Layout>
     )
   }
 }

frontend/src/App.js

@@ -36,6 +36,7 @@ const TwoFactorAuthenticatePage = lazy(() =>
   import('./TwoFactorAuthenticatePage'),
 )
 const EmailValidationPage = lazy(() => import('./EmailValidationPage'))
+const CreateOrganizationPage = lazy(() => import('./CreateOrganizationPage'))
 
 export default function App() {
   // Hooks to be used with this functional component
@@ -203,6 +204,13 @@ export default function App() {
                 <EmailValidationPage />
               </Page>
 
+              <PrivatePage
+                path="/create-organization"
+                title={t`Create Organization`}
+              >
+                <CreateOrganizationPage />
+              </PrivatePage>
+
               <Page component={PageNotFound} title="404" />
             </Switch>
           </Suspense>

frontend/src/CreateOrganizationField.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { elementType, func, oneOfType, shape, string } from 'prop-types'
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+} from '@chakra-ui/core'
+import { useField } from 'formik'
+import WithPseudoBox from './withPseudoBox'
+
+const OrganizationCreateField = WithPseudoBox(function OrganizationCreateField({
+  name,
+  label,
+  language,
+  forwardedRef,
+  ...props
+}) {
+  const [field, meta] = useField(name)
+
+  return (
+    <FormControl isInvalid={meta.error && meta.touched}>
+      <FormLabel htmlFor={name} fontWeight="bold">
+        {label} ({language})
+      </FormLabel>
+      <Input
+        {...field}
+        {...props}
+        id={name}
+        name={name}
+        ref={forwardedRef}
+        placeholder={`${label} (${language})`}
+      />
+      <FormErrorMessage>{meta.error}</FormErrorMessage>
+    </FormControl>
+  )
+})
+
+OrganizationCreateField.propTypes = {
+  name: string.isRequired,
+  forwardedRef: oneOfType([func, shape({ current: elementType })]),
+}
+
+const withForwardedRef = React.forwardRef((props, ref) => {
+  return <OrganizationCreateField {...props} forwardedRef={ref} />
+})
+withForwardedRef.displayName = 'OrganizationCreateField'
+
+export default withForwardedRef