Add state input to the organization form

frontend/src/components/OrganizationForm/OrganizationForm.tsx

@@ -3,19 +3,22 @@ import * as orgFormStyles from './orgFormStyle';
 import { Organization, OrganizationTag } from 'types';
 import {
   Autocomplete,
+  Button,
+  Chip,
+  createFilterOptions,
   DialogTitle,
   DialogContent,
-  TextField,
   DialogActions,
-  Switch,
-  Button,
   FormControlLabel,
-  Box,
-  Chip,
   Grid,
-  createFilterOptions
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography
 } from '@mui/material';
-
+import { SelectChangeEvent } from '@mui/material/Select';
+import { STATE_OPTIONS } from '../../constants/constants';
 import { useAuthContext } from 'context';
 
 const classes = orgFormStyles.classes;
@@ -31,6 +34,8 @@ export interface OrganizationFormValues {
   ipBlocks: string;
   isPassive: boolean;
   tags: OrganizationTag[];
+  stateName?: string | null | undefined;
+  acronym?: string | null;
 }
 
 export const OrganizationForm: React.FC<{
@@ -46,7 +51,9 @@ export const OrganizationForm: React.FC<{
     rootDomains: organization ? organization.rootDomains.join(', ') : '',
     ipBlocks: organization ? organization.ipBlocks.join(', ') : '',
     isPassive: organization ? organization.isPassive : false,
-    tags: []
+    tags: [],
+    stateName: organization ? organization.stateName : '',
+    acronym: organization ? organization.acronym : ''
   });
 
   const { apiGet } = useAuthContext();
@@ -79,7 +86,20 @@ export const OrganizationForm: React.FC<{
       [name]: value
     }));
   };
+  const handleStateChange = (event: SelectChangeEvent<string | null>) => {
+    setValues((values) => ({
+      ...values,
+      [event.target.name]: event.target.value
+    }));
+  };
 
+  const textFieldStyling = {
+    '& .MuiOutlinedInput-root': {
+      '&.Mui-focused fieldset': {
+        borderRadius: '0px'
+      }
+    }
+  };
   return (
     <StyledDialog
       open={open}
@@ -89,43 +109,90 @@ export const OrganizationForm: React.FC<{
       fullWidth
     >
       <DialogTitle id="form-dialog-title">
-        Create new {parent ? 'Team' : 'Organization'}
+        Create New {parent ? 'Team' : 'Organization'}
       </DialogTitle>
       <DialogContent>
+        Organization Name
         <TextField
+          sx={textFieldStyling}
+          placeholder="Enter the Organization's Name"
+          size="small"
           margin="dense"
           id="name"
           inputProps={{ maxLength: 250 }}
           name="name"
-          label="Organization Name"
           type="text"
           fullWidth
           value={values.name}
           onChange={onTextChange}
         />
+        Organization Acronym
+        <TextField
+          sx={textFieldStyling}
+          placeholder="Enter a unique Acronym for the Organization"
+          size="small"
+          margin="dense"
+          id="acronym"
+          inputProps={{ maxLength: 250 }}
+          name="acronym"
+          type="text"
+          fullWidth
+          value={values.acronym}
+          onChange={onTextChange}
+        />
+        Root Domains
         <TextField
+          sx={textFieldStyling}
+          placeholder="Enter Root Domains"
+          size="small"
           margin="dense"
           id="rootDomains"
           name="rootDomains"
-          label="Root Domains"
           type="text"
           fullWidth
           value={values.rootDomains}
           onChange={onTextChange}
         />
+        IP Blocks
         <TextField
+          sx={textFieldStyling}
+          placeholder="Enter IP Blocks"
+          size="small"
           margin="dense"
           id="ipBlocks"
           name="ipBlocks"
-          label="IP Blocks"
           type="text"
           fullWidth
           value={values.ipBlocks}
           onChange={onTextChange}
         />
-        <div className={classes.headerRow}>
-          <label>Tags</label>
-        </div>
+        Organization State
+        <Select
+          sx={{ mt: 1 }}
+          displayEmpty
+          size="small"
+          id="stateName"
+          value={values.stateName}
+          name="stateName"
+          onChange={handleStateChange}
+          fullWidth
+          renderValue={
+            values.stateName !== ''
+              ? undefined
+              : () => <Typography color="#bdbdbd">Select your State</Typography>
+          }
+        >
+          {STATE_OPTIONS.map((stateName: string, index: number) => (
+            <MenuItem key={index} value={stateName}>
+              {stateName}
+            </MenuItem>
+          ))}
+        </Select>
+        {/* TODO: Fix Tag selection issues. */}
+        <Typography mt={1}>Tags</Typography>
+        <Typography variant="caption">
+          Select an existing tag or add a new one.
+        </Typography>
         <span>
           {chosenTags &&
             chosenTags.length > 0 &&
@@ -144,7 +211,6 @@ export const OrganizationForm: React.FC<{
               ></Chip>
             ))}
         </span>
-        <Box>Select an existing tag or add a new one.</Box>
         <Grid container>
           <Grid item xs={10}>
             <Autocomplete
@@ -220,8 +286,6 @@ export const OrganizationForm: React.FC<{
             </Button>
           </Grid>
         </Grid>
-        <br></br>
-        <br></br>
         <FormControlLabel
           control={
             <Switch
@@ -256,8 +320,10 @@ export const OrganizationForm: React.FC<{
                   ? []
                   : values.ipBlocks.split(',').map((ip) => ip.trim()),
               name: values.name,
+              stateName: values.stateName,
               isPassive: values.isPassive,
               tags: chosenTags,
+              acronym: values.acronym,
               parent: parent ? parent.id : undefined
             });
             if (!organization) setValues(defaultValues);

frontend/src/components/__tests__/header.spec.tsx

@@ -88,7 +88,7 @@ describe('Header component', () => {
   });
 
   it('shows correct links for GLOBAL_ADMIN', () => {
-    const { getByText, queryByText } = render(<Header />, {
+    const { getByText } = render(<Header />, {
       authContext: {
         user: { ...testUser, userType: 'globalAdmin', isRegistered: true },
         currentOrganization: { ...testOrganization }

frontend/src/constants/constants.js

@@ -0,0 +1,121 @@
+export const STATE_OPTIONS = [
+  'Alabama',
+  'Alaska',
+  'American Samoa',
+  'Arizona',
+  'Arkansas',
+  'California',
+  'Colorado',
+  'Commonwealth Northern Mariana Islands',
+  'Connecticut',
+  'Delaware',
+  'District of Columbia',
+  'Federal States of Micronesia',
+  'Florida',
+  'Georgia',
+  'Guam',
+  'Hawaii',
+  'Idaho',
+  'Illinois',
+  'Indiana',
+  'Iowa',
+  'Kansas',
+  'Kentucky',
+  'Louisiana',
+  'Maine',
+  'Maryland',
+  'Massachusetts',
+  'Michigan',
+  'Minnesota',
+  'Mississippi',
+  'Missouri',
+  'Montana',
+  'Nebraska',
+  'Nevada',
+  'New Hampshire',
+  'New Jersey',
+  'New Mexico',
+  'New York',
+  'North Carolina',
+  'North Dakota',
+  'Ohio',
+  'Oklahoma',
+  'Oregon',
+  'Pennsylvania',
+  'Puerto Rico',
+  'Republic of Marshall Islands',
+  'Rhode Island',
+  'South Carolina',
+  'South Dakota',
+  'Tennessee',
+  'Texas',
+  'Utah',
+  'Vermont',
+  'Virgin Islands',
+  'Virginia',
+  'Washington',
+  'West Virginia',
+  'Wisconsin',
+  'Wyoming'
+];
+
+export const STATE_ABBREVIATED_OPTIONS = [
+  'AL', // Alabama
+  'AK', // Alaska
+  'AS', // American Samoa
+  'AZ', // Arizona
+  'AR', // Arkansas
+  'CA', // California
+  'CO', // Colorado
+  'MP', // Commonwealth Northern Mariana Islands
+  'CT', // Connecticut
+  'DE', // Delaware
+  'DC', // District of Columbia
+  'FM', // Federal States of Micronesia
+  'FL', // Florida
+  'GA', // Georgia
+  'GU', // Guam
+  'HI', // Hawaii
+  'ID', // Idaho
+  'IL', // Illinois
+  'IN', // Indiana
+  'IA', // Iowa
+  'KS', // Kansas
+  'KY', // Kentucky
+  'LA', // Louisiana
+  'ME', // Maine
+  'MD', // Maryland
+  'MA', // Massachusetts
+  'MI', // Michigan
+  'MN', // Minnesota
+  'MS', // Mississippi
+  'MO', // Missouri
+  'MT', // Montana
+  'NE', // Nebraska
+  'NV', // Nevada
+  'NH', // New Hampshire
+  'NJ', // New Jersey
+  'NM', // New Mexico
+  'NY', // New York
+  'NC', // North Carolina
+  'ND', // North Dakota
+  'OH', // Ohio
+  'OK', // Oklahoma
+  'OR', // Oregon
+  'PA', // Pennsylvania
+  'PR', // Puerto Rico
+  'MH', // Republic of Marshall Islands
+  'RI', // Rhode Island
+  'SC', // South Carolina
+  'SD', // South Dakota
+  'TN', // Tennessee
+  'TX', // Texas
+  'UT', // Utah
+  'VT', // Vermont
+  'VI', // Virgin Islands
+  'VA', // Virginia
+  'WA', // Washington
+  'WV', // West Virginia
+  'WI', // Wisconsin
+  'WY' // Wyoming
+];