feat: project funding stream dropdown

bcgov · Dec 15, 2021 · aaac8fd · aaac8fd
1 parent 2c2d6ee
commit aaac8fd
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 4 deletions.
diff --git a/app/components/Form/FormBase.tsx b/app/components/Form/FormBase.tsx
@@ -6,7 +6,7 @@ import FormComponentProps from "./FormComponentProps";
 
 interface Props extends FormComponentProps {
   schema: JSONSchema7;
-  uiSchema: object;
+  uiSchema: {};
 }
 
 const FormBase: React.FC<Props> = ({
@@ -42,7 +42,7 @@ const FormBase: React.FC<Props> = ({
   }, []);
 
   return (
-    <FormBorder title="Background">
+    <FormBorder title={schema.title}>
       <Form
         // @ts-ignore
         ref={formRef}

diff --git a/app/components/Project/ProjectForm.tsx b/app/components/Project/ProjectForm.tsx
@@ -23,6 +23,15 @@ const ProjectForm: React.FC<Props> = (props) => {
               }
             }
           }
+          allFundingStreams {
+            edges {
+              node {
+                rowId
+                name
+                description
+              }
+            }
+          }
         }
       }
     `,
@@ -37,9 +46,22 @@ const ProjectForm: React.FC<Props> = (props) => {
     );
   }
 
+  // If there is a funding stream selected, retrieve it to populate the description field below in the UI Schema.
+  let selectedFundingStream;
+  if (props.formData.fundingStreamId) {
+    selectedFundingStream = query.allFundingStreams.edges.find(
+      ({ node }) => node.rowId === props.formData.fundingStreamId
+    );
+  }
+
   const schema: JSONSchema7 = {
     type: "object",
-    required: ["rfpNumber", "description", "operatorId"],
+    required: [
+      "rfpNumber", 
+      "description", 
+      "operatorId", 
+      "fundingStreamId"
+    ],
     properties: {
       rfpNumber: {
         type: "string",
@@ -63,6 +85,22 @@ const ProjectForm: React.FC<Props> = (props) => {
       operatorTradeName: {
         type: "string",
       },
+      fundingStreamId: {
+        type: "number",
+        title: "Funding Stream ID",
+        default: undefined,
+        anyOf: query.allFundingStreams.edges.map(({ node }) => {
+          return {
+            type: "number",
+            title: node.name,
+            enum: [node.rowId],
+            value: node.rowId,
+          };
+        }),
+      },
+      fundingStreamDescription: {
+        type: "string",
+      },
     },
   };
 
@@ -92,6 +130,21 @@ const ProjectForm: React.FC<Props> = (props) => {
         title: "Trade Name",
       },
     },
+    fundingStreamId: {
+      "ui:placeholder": "Select a Funding Stream",
+      "ui:widget": "select",
+      "ui:col-md": 12,
+      "bcgov:size": "small",
+    },
+    fundingStreamDescription: {
+      "ui:col-md": 12,
+      "ui:widget": "DisplayOnly",
+      "bcgov:size": "large",
+      "ui:options": {
+        text: `${selectedFundingStream ? selectedFundingStream.node.description : ""}`,
+        title: "Description",
+      },
+    },
   };
   return <FormBase {...props} schema={schema} uiSchema={uiSchema} />;
 };

diff --git a/app/lib/theme/service-development-toolkit-form.tsx b/app/lib/theme/service-development-toolkit-form.tsx
@@ -5,6 +5,7 @@ import TextWidget from "./widgets/TextWidget";
 import { utils } from "@rjsf/core";
 import SearchDropdownWidget from "lib/theme/widgets/SearchDropdownWidget";
 import DisplayOnlyWidget from "lib/theme/widgets/DisplayOnlyWidget";
+import SelectWidget from "lib/theme/widgets/SelectWidget";
 
 const { fields, widgets } = utils.getDefaultRegistry();
 
@@ -16,6 +17,7 @@ const Theme: ThemeProps = {
     TextWidget: TextWidget,
     SearchWidget: SearchDropdownWidget,
     DisplayOnly: DisplayOnlyWidget,
+    SelectWidget: SelectWidget,
   },
   ObjectFieldTemplate: ObjectFieldTemplate,
   FieldTemplate: FieldTemplate,

diff --git a/app/lib/theme/widgets/SelectWidget.tsx b/app/lib/theme/widgets/SelectWidget.tsx
@@ -0,0 +1,39 @@
+import { WidgetProps } from "@rjsf/core";
+import Dropdown from "@button-inc/bcgov-theme/Dropdown";
+import getRequiredLabel from "../utils/getRequiredLabel";
+
+const SelectWidget: React.FunctionComponent<WidgetProps> = (props) => {
+  const { id, onChange, options, placeholder, label, required, uiSchema } = props;
+  console.log(props)
+  return (
+    <>
+      <label htmlFor={`funding-stream-dropdown-${props.id}`}>
+        {getRequiredLabel(label, required)}
+      </label>
+      <Dropdown
+        id={id}
+        onChange={(e) => onChange(e.target.value || undefined)}
+        placeholder={placeholder}
+        size={(uiSchema && uiSchema["bcgov:size"]) || "large"}
+        required={required}
+      >
+        {options.enumOptions.map((opt) => {
+          return (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          );
+        })}
+      </Dropdown>
+      <style jsx>
+        {`
+          :global(input) {
+            width: 100%;
+          }
+        `}
+      </style>
+    </>
+  );
+};
+
+export default SelectWidget;
diff --git a/app/pages/cif/create-project.tsx b/app/pages/cif/create-project.tsx
@@ -111,7 +111,6 @@ export function CreateProject({
             />
           </Grid.Col>
         </Grid.Row>
-
         <Button
           size="medium"
           variant="primary"

diff --git a/app/tests/unit/components/Project/ProjectForm.test.tsx b/app/tests/unit/components/Project/ProjectForm.test.tsx
@@ -86,6 +86,7 @@ describe("The Project Form", () => {
       rfpNumber: "12345678",
       description: "d",
       operatorId: 1,
+      fundingStreamId: 1,
     };
     environment.mock.queueOperationResolver((operation) =>
       MockPayloadGenerator.generate(operation, {
@@ -102,6 +103,17 @@ describe("The Project Form", () => {
                 },
               ],
             },
+            allFundingStreams: {
+              edges: [
+                {
+                  node: {
+                    rowId: 1,
+                    name: "EP",
+                    description: "Emissions Performance",
+                  },
+                },
+              ],
+            },
           };
         },
       })
@@ -116,6 +128,9 @@ describe("The Project Form", () => {
     expect(screen.getByPlaceholderText("Select an Operator").value).toBe(
       "test operator (1234abcd)"
     );
+    expect(screen.getByPlaceholderText("Select a Funding Stream").value).toBe(
+      "EP"
+    );
   });
   it("calls onformerrors on first render if there are errors", () => {
     const onFormErrorsSpy = jest.fn();
@@ -124,6 +139,7 @@ describe("The Project Form", () => {
       rfpNumber: "",
       description: "",
       operatorId: 1,
+      fundingStreamId: 1,
     };
     props.onFormErrors = onFormErrorsSpy;
 
@@ -142,6 +158,17 @@ describe("The Project Form", () => {
                 },
               ],
             },
+            allFundingStreams: {
+              edges: [
+                {
+                  node: {
+                    rowId: 1,
+                    name: "EP",
+                    description: "Emissions Performance",
+                  },
+                },
+              ],
+            },
           };
         },
       })
@@ -166,6 +193,7 @@ describe("The Project Form", () => {
       rfpNumber: "1999-RFP-1-123-ABCD",
       description: "d",
       operatorId: 1,
+      fundingStreamId: 1,
     };
     props.onFormErrors = onFormErrorsSpy;
     environment.mock.queueOperationResolver((operation) =>
@@ -183,6 +211,17 @@ describe("The Project Form", () => {
                 },
               ],
             },
+            allFundingStreams: {
+              edges: [
+                {
+                  node: {
+                    rowId: 1,
+                    name: "EP",
+                    description: "Emissions Performance",
+                  },
+                },
+              ],
+            },
           };
         },
       })
@@ -197,6 +236,7 @@ describe("The Project Form", () => {
         rfpNumber: null,
         description: null,
         operatorId: null,
+        fundingStreamId: null,
       })
     );
   });
@@ -225,6 +265,17 @@ describe("The Project Form", () => {
                 },
               ],
             },
+            allFundingStreams: {
+              edges: [
+                {
+                  node: {
+                    rowId: 1,
+                    name: "EP",
+                    description: "Emissions Performance",
+                  },
+                },
+              ],
+            },
           };
         },
       })
@@ -253,6 +304,7 @@ describe("The Project Form", () => {
       rfpNumber: "1999123-RFP-1-123-ABCD",
       description: "desc",
       operatorId: 1,
+      fundingStreamId: 1,
     };
     props.onFormErrors = onFormErrorsSpy;
 
@@ -271,6 +323,17 @@ describe("The Project Form", () => {
                 },
               ],
             },
+            allFundingStreams: {
+              edges: [
+                {
+                  node: {
+                    rowId: 1,
+                    name: "EP",
+                    description: "Emissions Performance",
+                  },
+                },
+              ],
+            },
           };
         },
       })
@@ -285,6 +348,7 @@ describe("The Project Form", () => {
         rfpNumber: expect.anything(),
         description: null,
         operatorId: null,
+        fundingStreamId: null,
       })
     );
   });

diff --git a/app/tests/unit/lib/theme/widgets/SelectWidget.test.tsx b/app/tests/unit/lib/theme/widgets/SelectWidget.test.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import SelectWidget from "lib/theme/widgets/SelectWidget";
+
+import { render } from "@testing-library/react";
+
+describe("The SelectWidget Widget", () => {
+  it("Matches the snapshot with no default value set", () => {
+    const props: any = {
+      id: "1",
+      placeholder: "test placeholder",
+      onChange: jest.fn(),
+      label: "Search",
+      value: undefined,
+      required: false,
+      schema: {
+        anyOf: [
+          { value: 1, enum: [1], type: "number", title: "Option 1" },
+          { value: 2, enum: [2], type: "number", title: "Option 2" },
+        ],
+      },
+    };
+
+    const componentUnderTest = render(<SelectWidget {...props} />);
+
+    expect(componentUnderTest.container).toMatchSnapshot();
+  });
+
+  it("Matches the snapshot with a default value set", () => {
+    const props: any = {
+      id: "1",
+      placeholder: "test placeholder",
+      onChange: jest.fn(),
+      label: "Search",
+      value: 1,
+      required: false,
+      schema: {
+        anyOf: [
+          { value: 1, enum: [1], type: "number", title: "Option 1" },
+          { value: 2, enum: [2], type: "number", title: "Option 2" },
+        ],
+      },
+    };
+
+    const componentUnderTest = render(<SelectWidget {...props} />);
+
+    expect(componentUnderTest.container).toMatchSnapshot();
+  });
+});