Merge pull request #313 from Enterprise-CMCS/master

Release to val

.github/workflows/github-pages.yml

@@ -2,7 +2,6 @@
 name: GitHub Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
     branches: ["master"]
 
@@ -23,6 +22,9 @@ concurrency:
   group: "pages"
   cancel-in-progress: true
 
+env:
+  STAGE_NAME: ${{ startsWith(github.ref_name, 'snyk-') && 'snyk' || github.ref_name }}
+
 jobs:
   # Build job
   build:
@@ -32,23 +34,36 @@ jobs:
         uses: actions/checkout@v3
       - name: Setup Pages
         uses: actions/configure-pages@v2
-      - name: Setup Node.js environment
-        uses: actions/[email protected]
+      - uses: ./.github/actions/setup
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          role-to-assume: ${{ secrets.AWS_OIDC_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+          role-duration-seconds: 10800
+      - name: Set env
+        run: |
+          echo "NEXT_PUBLIC_API_REST_URL=$(
+            aws cloudformation \
+            --region us-east-1 describe-stacks \
+            --stack-name $PROJECT-api-$STAGE_NAME | jq -r '.Stacks[0].Outputs[] | select(.OutputKey == "ApiGatewayRestApiUrl") | .OutputValue'
+          )" >> $GITHUB_ENV
       - name: Install Packages
         run: |
           cd docs/_deploy-metrics
           rm -rf node_modules
           yarn install --frozen-lockfile
           echo $BRANCHES_TO_GENERATE
-      - name: Build Dora
+      - name: Build Deploy Metrics
         run: |
           cd docs/_deploy-metrics
           yarn build
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }}
           REPO_NAME: macpro-om-template
-          BRANCHES_TO_GENERATE: master
+          BRANCHES_TO_GENERATE: master,val,production
       - name: Build with Jekyll
         uses: actions/jekyll-build-pages@v1
         with:

.gitignore

@@ -13,4 +13,5 @@ build_run
 .build
 .turbo
 coverage
-lambda_layer.zip
+lambda_layer.zip
+**/.auth/*.json

docs/_config.yml

@@ -39,14 +39,22 @@ contact_email: [email protected]
 
 team:
   members: # This list automatically populates the Team Introduction page.  Add/Edit as appropriate.
-    - role: Product Owner
+    - role: Product
       description: Responsible for project scope, direction, and delivery.
-      name: Anna Hawk
-      email: [email protected]
+      name: Hannah Morris
+      email: [email protected]
+    - role: Product
+      description: Responsible for project scope, direction, and delivery.
+      name: Erika Durant
+      email: [email protected]
     - role: Tech Lead
-      description: Leads tooling, tech, and arch discussions and decisions.
+      description: Tooling, tech, and arch discussions and decisions.
       name: Ben Paige
       email: [email protected]
+    - role: Tech Lead
+      description: Tooling, tech, and arch discussions and decisions.
+      name: Michael Dial
+      email: [email protected]
   core_hours: 10:00am - 3:00pm ET
 
 meetings:

docs/_deploy-metrics/lib/formData.ts

@@ -0,0 +1,92 @@
+export type FormResult = {
+    version: string;
+    data: any; // replace 'any' with the actual type of the data returned from the API
+  } | null
+
+  export type ResultObject = {
+    [formId: string]: FormResult[];
+  }
+
+  export async function getAllFormData(formData: any): Promise<ResultObject> {
+    const resultObject: ResultObject = {};
+
+    // Loop through each key-value pair in formData
+    for (const formId in formData) {
+      if (formData.hasOwnProperty(formId)) {
+        const formVersions = formData[formId];
+
+        // Loop through each formVersion for the current formId
+        resultObject[formId] = await Promise.all(
+          formVersions.map(async (formVersion: any) => {
+            try {
+              // Make API request using fetch
+              const response = await fetch(
+                `${process.env.NEXT_PUBLIC_API_REST_URL}/forms?formId=${formId.toLowerCase()}&formVersion=${formVersion}`
+              );
+
+              // Ensure the request was successful
+              if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+              }
+
+              // Extract and format data from the API response
+              const data = await response.json();
+              const formattedResult: FormResult = {
+                version: formVersion,
+                data,
+              };
+
+              return formattedResult;
+            } catch (error) {
+              // Handle error if API request fails
+              console.error(`Error fetching data for formId: ${formId}, version: ${formVersion}`);
+              console.error(error);
+              return null;
+            }
+          })
+        );
+      }
+    }
+
+    return resultObject;
+  }
+
+export function generateDocs(obj: any, results: any = [], parentName: string = '', prompt: string = '') {
+  if (typeof obj === 'object' && obj !== null) {
+      if ('rhf' in obj) {
+          const resultItem: any = { rhf: obj.rhf };
+
+          if ('label' in obj) {
+              resultItem.label = obj.label;
+          }
+
+          if ('name' in obj) {
+              resultItem.name = obj.name;
+          }
+
+          if ((obj.rhf === 'Select' || obj.rhf === 'Radio') && obj.props) {
+            resultItem.options = []
+              obj.props?.options.forEach((field: any) => {
+                resultItem.options?.push(field.value)
+              })
+          }
+
+          resultItem.parentName = parentName;
+          resultItem.prompt = prompt;
+
+          results.push(resultItem);
+      }
+
+      for (const key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            if ('name' in obj) {
+              parentName = obj.name;
+            }
+            if ('description' in obj) {
+              prompt = obj.description;
+            }
+              generateDocs(obj[key], results, parentName, prompt);
+          }
+      }
+  }
+}

docs/_deploy-metrics/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.3.6",
-    "@emotion/react": "^11",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11",
     "@octokit/auth-action": "^2.0.2",
     "@octokit/types": "^8.0.0",
@@ -25,11 +25,11 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
     "react-json-to-csv": "^1.2.0",
-    "recharts": "^2.10.3"
+    "recharts": "^2.10.4"
   },
   "devDependencies": {
     "@types/node": "18.11.0",
-    "@types/react": "18.0.21",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "18.0.6",
     "eslint": "8.25.0",
     "eslint-config-next": "12.3.1",

docs/_deploy-metrics/pages/webforms/index.tsx

@@ -0,0 +1,134 @@
+import type { InferGetStaticPropsType } from "next";
+import {
+  Box,
+  HStack,
+  Heading,
+  Select,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import {
+  getAllFormData,
+  ResultObject,
+  generateDocs,
+} from "../../lib/formData";
+import React from "react";
+
+export const getStaticProps = async () => {
+  let allFormsWithData, allFormsAndVersions;
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_REST_URL}/allForms`
+    );
+    allFormsAndVersions = await response.json();
+    allFormsWithData = await getAllFormData(allFormsAndVersions);
+  } catch (e) {
+    console.error(e);
+  }
+
+  return {
+    props: {
+      allFormsAndVersions,
+      allFormsWithData,
+    },
+  };
+};
+
+const WebformsDocs = ({
+  allFormsAndVersions,
+  allFormsWithData,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const [form, setForm] = React.useState("");
+  const [version, setVersion] = React.useState("");
+
+  if (!allFormsWithData) return;
+
+  return (
+    <Box
+      as="section"
+      bg="bg.surface"
+      pt={{ base: "4", md: "8" }}
+      pb={{ base: "12", md: "24" }}
+      mx="10"
+    >
+      <Box maxW={"5xl"} m="auto">
+        <Stack spacing="4">
+          <Heading size={{ base: "md", md: "lg" }} fontWeight="medium">
+            Webforms Documentation
+          </Heading>
+          <Text>
+            The purpose of this page is provide developers and anyone who might
+            need to use the data collected in these forms infomation about how
+            the data collected from the user connects to the form schema itself.
+          </Text>
+          <Text color="fg.muted">
+            Choose a form and version to see all possible fields
+          </Text>
+          <HStack spacing={4}>
+            <Select
+              placeholder="Select a form"
+              value={form}
+              onChange={(e) => setForm(e.target.value)}
+            >
+              {Object.keys(allFormsAndVersions).map((form) => (
+                <option key={form} value={form}>
+                  {form}
+                </option>
+              ))}
+            </Select>
+            <Select
+              placeholder="version"
+              disabled={!form}
+              value={version}
+              onChange={(e) => setVersion(e.target.value)}
+            >
+              {form &&
+                allFormsWithData[form].map((val) => (
+                  <option key={val?.version} value={val?.version}>
+                    {val?.version}
+                  </option>
+                ))}
+            </Select>
+          </HStack>
+
+          {allFormsWithData[form] && version && (
+            <VersionDocs
+              allFormsWithData={allFormsWithData}
+              form={form}
+              version={version}
+            />
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+};
+
+const VersionDocs: React.FC<{
+  allFormsWithData: ResultObject;
+  form: string;
+  version: string;
+}> = ({ allFormsWithData, form, version }) => {
+  const selectedFormData = allFormsWithData[form].find(
+    (f) => f?.version === version
+  );
+
+    const resultsArray: any = []
+    generateDocs(selectedFormData?.data, resultsArray);
+
+  return <>
+    <Text fontSize='2xl'>{selectedFormData?.data?.header}</Text>
+    {resultsArray.map((d: any, ind: number) => (
+      <div key={d.name + ind}>
+        <Text fontSize='sm' fontWeight="extrabold">Name: {d.name}</Text>
+        <Text fontSize='sm' fontWeight="bold">Type: {d.rhf}</Text>
+        {d.prompt && <Text fontSize='sm' fontWeight="bold">Prompt: {d.prompt}</Text>}
+        {d.label && <Text fontSize='sm' fontWeight="bold">Label: {d.label}</Text>}
+        {d.parentName && <Text fontSize='sm'>Parent: {d.parentName}</Text>}
+        {d.options && <Text fontSize='sm'> options: {d.options.join(', ')}</Text>}
+        <hr style={{ marginTop: 16}}/>
+      </div>
+    ))}
+  </>
+};
+export default WebformsDocs;