868 Frontend: IUCN Classifications (#110)

BHBC-868: IUCN Classifications (frontend)

app/src/features/projects/CreateProjectPage.test.tsx

@@ -87,6 +87,8 @@ describe('CreateProjectPage', () => {
 
       expect(getByText('Species')).toBeVisible();
 
+      expect(getByText('IUCN Classification')).toBeVisible();
+
       expect(getByText('Funding and Partnerships')).toBeVisible();
 
       expect(asFragment()).toMatchSnapshot();

app/src/features/projects/CreateProjectPage.tsx

@@ -42,6 +42,10 @@ import ProjectObjectivesForm, {
   ProjectObjectivesFormInitialValues,
   ProjectObjectivesFormYupSchema
 } from 'features/projects/components/ProjectObjectivesForm';
+import ProjectIUCNForm, {
+  ProjectIUCNFormInitialValues,
+  ProjectIUCNFormYupSchema
+} from 'features/projects/components/ProjectIUCNForm';
 import ProjectPermitForm, {
   IProjectPermitForm,
   ProjectPermitFormInitialValues,
@@ -104,7 +108,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const NUM_PARTIAL_PROJECT_STEPS = 2;
-const NUM_ALL_PROJECT_STEPS = 7;
+const NUM_ALL_PROJECT_STEPS = 8;
 
 /**
  * Page for creating a new project.
@@ -274,6 +278,32 @@ const CreateProjectPage: React.FC = () => {
         stepValues: ProjectSpeciesFormInitialValues,
         stepValidation: ProjectSpeciesFormYupSchema
       },
+      {
+        stepTitle: 'IUCN Classification',
+        stepSubTitle: 'Lorem ipsum dolor sit amet, consectur whatever whatever',
+        stepContent: (
+          <ProjectIUCNForm
+            classifications={
+              [
+                { id: 1, name: 'Class 1' },
+                { id: 2, name: 'Class 2' }
+              ].map((item) => {
+                return { value: item.id, label: item.name };
+              }) || []
+            }
+            subClassifications={
+              [
+                { id: 1, name: 'Sub-class 1' },
+                { id: 2, name: 'Sub-class 2' }
+              ].map((item) => {
+                return { value: item.id, label: item.name };
+              }) || []
+            }
+          />
+        ),
+        stepValues: ProjectIUCNFormInitialValues,
+        stepValidation: ProjectIUCNFormYupSchema
+      },
       {
         stepTitle: 'Funding and Partnerships',
         stepSubTitle: 'Specify funding and partnerships for the project',

app/src/features/projects/__snapshots__/CreateProjectPage.test.tsx.snap

@@ -756,6 +756,72 @@ exports[`CreateProjectPage adds the extra create project steps if at least 1 per
                 >
                   <div
                     class="MuiBox-root MuiBox-root-82"
+                  >
+                    <h2
+                      class="MuiTypography-root makeStyles-stepTitle-39 MuiTypography-h2"
+                    >
+                      IUCN Classification
+                    </h2>
+                    <h6
+                      class="MuiTypography-root MuiTypography-subtitle2"
+                    >
+                      Lorem ipsum dolor sit amet, consectur whatever whatever
+                    </h6>
+                  </div>
+                </span>
+              </span>
+            </span>
+            <div
+              class="MuiStepContent-root"
+              disabled=""
+              icon="7"
+            />
+          </div>
+          <div
+            class="MuiStepConnector-root MuiStepConnector-vertical Mui-disabled"
+          >
+            <span
+              class="MuiStepConnector-line MuiStepConnector-lineVertical"
+            />
+          </div>
+          <div
+            class="MuiStep-root MuiStep-vertical"
+          >
+            <span
+              class="MuiStepLabel-root MuiStepLabel-vertical Mui-disabled"
+            >
+              <span
+                class="MuiStepLabel-iconContainer"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiStepIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="12"
+                  />
+                  <text
+                    class="MuiStepIcon-text"
+                    text-anchor="middle"
+                    x="12"
+                    y="16"
+                  >
+                    8
+                  </text>
+                </svg>
+              </span>
+              <span
+                class="MuiStepLabel-labelContainer"
+              >
+                <span
+                  class="MuiTypography-root MuiStepLabel-label MuiTypography-body2 MuiTypography-displayBlock"
+                >
+                  <div
+                    class="MuiBox-root MuiBox-root-83"
                   >
                     <h2
                       class="MuiTypography-root makeStyles-stepTitle-39 MuiTypography-h2"
@@ -774,7 +840,7 @@ exports[`CreateProjectPage adds the extra create project steps if at least 1 per
             <div
               class="MuiStepContent-root MuiStepContent-last"
               disabled=""
-              icon="7"
+              icon="8"
             />
           </div>
         </div>

app/src/features/projects/components/ProjectDetailsForm.tsx

@@ -1,13 +1,4 @@
-import {
-  FormControl,
-  FormHelperText,
-  Grid,
-  InputLabel,
-  MenuItem,
-  OutlinedInput,
-  Select,
-  TextField
-} from '@material-ui/core';
+import { FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField } from '@material-ui/core';
 import MultiAutocompleteFieldVariableSize, {
   IMultiAutocompleteFieldOption
 } from 'components/fields/MultiAutocompleteFieldVariableSize';
@@ -88,8 +79,7 @@ const ProjectDetailsForm: React.FC<IProjectDetailsFormProps> = (props) => {
               onChange={handleChange}
               error={touched.project_type && Boolean(errors.project_type)}
               displayEmpty
-              inputProps={{ 'aria-label': 'Project Type' }}
-              input={<OutlinedInput notched label="Project Type" />}>
+              inputProps={{ 'aria-label': 'Project Type' }}>
               {props.project_type.map((item) => (
                 <MenuItem key={item.value} value={item.value}>
                   {item.label}

app/src/features/projects/components/ProjectFundingItemForm.tsx

@@ -12,7 +12,6 @@ import {
   InputAdornment,
   InputLabel,
   MenuItem,
-  OutlinedInput,
   Select,
   TextField,
   Typography
@@ -143,8 +142,7 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
                           }}
                           error={touched.agency_id && Boolean(errors.agency_id)}
                           displayEmpty
-                          inputProps={{ 'aria-label': 'Agency Name' }}
-                          input={<OutlinedInput notched label="Agency Name" />}>
+                          inputProps={{ 'aria-label': 'Agency Name' }}>
                           {props.funding_sources.map((item) => (
                             <MenuItem key={item.value} value={item.value}>
                               {item.label}
@@ -169,8 +167,7 @@ const ProjectFundingItemForm: React.FC<IProjectFundingItemFormProps> = (props) =
                             onChange={handleChange}
                             error={touched.investment_action_category && Boolean(errors.investment_action_category)}
                             displayEmpty
-                            inputProps={{ 'aria-label': `${investment_action_category_label}` }}
-                            input={<OutlinedInput notched label={investment_action_category_label} />}>
+                            inputProps={{ 'aria-label': `${investment_action_category_label}` }}>
                             {props.investment_action_category
                               // Only show the investment action categories whose fs_id matches the agency_id id
                               .filter((item) => item.fs_id === values.agency_id)

app/src/features/projects/components/ProjectIUCNForm.test.tsx

@@ -0,0 +1,73 @@
+import { render } from '@testing-library/react';
+import { Formik } from 'formik';
+import React from 'react';
+import { IMultiAutocompleteFieldOption } from 'components/fields/MultiAutocompleteFieldVariableSize';
+import ProjectIUCNForm, {
+  IProjectIUCNForm,
+  ProjectIUCNFormInitialValues,
+  ProjectIUCNFormYupSchema
+} from './ProjectIUCNForm';
+
+const classifications: IMultiAutocompleteFieldOption[] = [
+  {
+    value: 'class_1',
+    label: 'Class 1'
+  },
+  {
+    value: 'class_2',
+    label: 'Class 2'
+  }
+];
+
+const subClassifications: IMultiAutocompleteFieldOption[] = [
+  {
+    value: 'subclass_1',
+    label: 'Sub-class 1'
+  },
+  {
+    value: 'subclass_2',
+    label: 'Sub-class 2'
+  }
+];
+
+describe('ProjectIUCNForm', () => {
+  it('renders correctly with default empty values', () => {
+    const { asFragment } = render(
+      <Formik
+        initialValues={ProjectIUCNFormInitialValues}
+        validationSchema={ProjectIUCNFormYupSchema}
+        validateOnBlur={true}
+        validateOnChange={false}
+        onSubmit={async () => {}}>
+        {() => <ProjectIUCNForm classifications={classifications} subClassifications={subClassifications} />}
+      </Formik>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders correctly with existing details values', () => {
+    const existingFormValues: IProjectIUCNForm = {
+      classificationDetails: [
+        {
+          classification: 'class_1',
+          subClassification1: 'subclass_1',
+          subClassification2: 'subclass_2'
+        }
+      ]
+    };
+
+    const { asFragment } = render(
+      <Formik
+        initialValues={existingFormValues}
+        validationSchema={ProjectIUCNFormYupSchema}
+        validateOnBlur={true}
+        validateOnChange={false}
+        onSubmit={async () => {}}>
+        {() => <ProjectIUCNForm classifications={classifications} subClassifications={subClassifications} />}
+      </Formik>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});