Touch ups (#35)

* refurbishes

* whew

* level dividers

* reline dividers

* removed unused import

---------

Co-authored-by: natjoe4 <njjones@mitre.org>

__tests__/pages/resource/id/index.test.tsx

@@ -35,9 +35,9 @@ describe("measure resource ID render", () => {
  );
  });
 
- //for Measure resources, "Evaluate Measure" and "Calculate Care Gaps" buttons will be in the document
+ //for Measure resources, "Evaluate Measure" and "Care Gaps" buttons will be in the document
  expect(await screen.findByRole("link", { name: "Evaluate Measure" })).toBeInTheDocument();
- expect(await screen.findByRole("link", { name: "Calculate Care Gaps" })).toBeInTheDocument();
+ expect(await screen.findByRole("link", { name: "Care Gaps" })).toBeInTheDocument();
  });
 });
 

components/ResourceCodeEditor.tsx

@@ -29,7 +29,7 @@ const ResourceCodeEditor = (props: ResourceCodeEditorProps) => {
  value={props.initialValue}
  minHeight="20vh"
  maxHeight="80vh"
- maxWidth="77vw"
+ maxWidth="76vw"
  extensions={[json(), linter(jsonLinter)]}
  onUpdate={(v) => {
  if (props.onValidate) {

components/ResourceCounts.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useContext, SetStateAction } from "react";
-import { Badge, Button, Grid, Input, Stack } from "@mantine/core";
+import { Badge, Button, Input, Stack } from "@mantine/core";
 import { cleanNotifications, showNotification } from "@mantine/notifications";
 import Link from "next/link";
 import { CountContext } from "./CountContext";
@@ -80,7 +80,6 @@ const ResourceCounts = () => {
  variant="subtle"
  styles={{
  inner: {
- paddingLeft: "15px",
  justifyContent: "flex-start",
  },
  }}
@@ -91,27 +90,26 @@ const ResourceCounts = () => {
  </Button>
  </Link>
  ));
- return <div> {buttonArray} </div>;
+ return <div style={{ width: "100%" }}> {buttonArray} </div>;
  };
 
  return (
- <Stack align="flex-start" spacing="xs" style={{ marginBottom: 30 }}>
- <Grid>
- <Grid.Col xs={10} sm={10}>
- <Input
- value={searchValue}
- onChange={(event: { currentTarget: { value: SetStateAction<string> } }) =>
- setSearchValue(event.currentTarget.value)
- }
- icon={<Search size={18} />}
- placeholder="Search"
- size="sm"
- width="fullWidth"
- style={{ marginLeft: "1.5vw", width: "16vw" }}
- />
- </Grid.Col>
- <Grid.Col xs={2} sm={2}></Grid.Col>
- </Grid>
+ <Stack
+ align="flex-start"
+ spacing="xs"
+ style={{ paddingLeft: "24px", marginBottom: "28px", width: "20vw" }}
+ >
+ <Input
+ value={searchValue}
+ onChange={(event: { currentTarget: { value: SetStateAction<string> } }) =>
+ setSearchValue(event.currentTarget.value)
+ }
+ icon={<Search size={16} />}
+ placeholder="Search"
+ size="sm"
+ style={{ width: "100%" }}
+ />
+
  <ResourceButtonsGroup />
  </Stack>
  );

components/ResourceIDs.tsx

@@ -9,13 +9,17 @@ import Link from "next/link";
  * @returns an array of Links of resource IDs, or if none exist, a "No resource found" message, or if an
  * invalid response body is passed through, an error message
  */
-function ResourceIDs(props: { jsonBody: fhirJson.Bundle }) {
- const entryArray = props.jsonBody.entry;
+function ResourceIDs({ jsonBody }: { jsonBody: fhirJson.Bundle }) {
+ const entryArray = jsonBody.entry;
 
- if (props.jsonBody.total === 0 || entryArray == null || entryArray.length === 0) {
+ if (jsonBody.total === 0 || entryArray == null || entryArray.length === 0) {
  return <div>No resources found</div>;
- } else if (props.jsonBody.total && props.jsonBody.total > 0) {
- return <div>{entryArray != null ? getAllIDs(entryArray) : <div>No resources</div>}</div>;
+ } else if (jsonBody.total && jsonBody.total > 0) {
+ return (
+ <div style={{ width: "100%" }}>
+ {entryArray != null ? getAllIDs(entryArray) : <div>No resources</div>}
+ </div>
+ );
  } else {
  return <div>Invalid JSON Body</div>;
  }

components/ResourceMenu.tsx

@@ -12,8 +12,8 @@ export interface MenuProps {
 
 /**
  * ResourceMenu provides a menu dropdown component of all the measures. When a
- * measure is selected, it redirects to the evaluate measure page prepopulated
- * with data based on the resourceType and ID values passed in to the menu component
+ * measure is selected, it redirects to the evaluate measure page pre-populated
+ * with data based on the resourceType and ID values passed into the menu component
  * @params MenuProps
  * @returns a Menu component populated with measure resource IDs
  */
@@ -42,8 +42,7 @@ export default function ResourceMenu({ resourceType, id, bundleEntry, label, url
  }/${url}?${resourceType.toLowerCase()}=${resourceType}/${id}`}
  >
  <div>
- {" "}
- {el.resource.resourceType}/{el.resource.id}{" "}
+ {el.resource.resourceType}/{el.resource.id}
  </div>
  </Link>
  </Menu.Item>