Rename sections in Expectations Details view (#1444)

* Rename section title

* Add ExpectationsResults story

* Add story for GatheredFacts

* Add ExpectedValues story

assets/js/components/ExecutionResults/CheckResultDetail/ExpectationsResults.jsx

@@ -40,7 +40,7 @@ function ExpectationsResults({
 
   return (
     <div className="w-full my-4 mr-4 bg-white shadow rounded-lg px-8 py-4">
-      <div className="text-lg font-bold">Expectations</div>
+      <div className="text-lg font-bold">Evaluation Results</div>
       {isError ? (
         <div className="mt-3 text-red-500">{errorMessage}</div>
       ) : (

assets/js/components/ExecutionResults/CheckResultDetail/ExpectationsResults.stories.jsx

@@ -0,0 +1,19 @@
+import { faker } from '@faker-js/faker';
+import ExpectationsResults from './ExpectationsResults';
+
+export default {
+  title: 'ExpectationsResults',
+  component: ExpectationsResults,
+};
+
+export const Default = {
+  args: {
+    isTargetHost: true,
+    results: [
+      { name: faker.animal.bear(), return_value: true },
+      { name: faker.animal.bear(), return_value: false },
+    ],
+    isError: false,
+    errorMessage: 'An error occurred',
+  },
+};

assets/js/components/ExecutionResults/CheckResultDetail/ExpectedValues.jsx

@@ -17,7 +17,7 @@ function ExpectedValues({
 
   return (
     <div className="w-full my-4 mr-4 bg-white shadow rounded-lg px-8 py-4">
-      <div className="text-lg font-bold">Values</div>
+      <div className="text-lg font-bold">Expected Values</div>
       {isError ? (
         <div className="mt-3 text-red-500 text-sm">
           Expected Values unavailable

assets/js/components/ExecutionResults/CheckResultDetail/ExpectedValues.stories.jsx

@@ -0,0 +1,19 @@
+import { faker } from '@faker-js/faker';
+
+import ExpectedValues from './ExpectedValues';
+
+export default {
+  title: 'ExpectedValues',
+  component: ExpectedValues,
+};
+
+export const Default = {
+  args: {
+    isTargetHost: true,
+    expectedValues: [
+      { name: faker.animal.bear(), value: faker.datatype.number() },
+      { name: faker.animal.bear(), value: faker.datatype.number() },
+    ],
+    isError: false,
+  },
+};

assets/js/components/ExecutionResults/CheckResultDetail/GatheredFacts.jsx

@@ -19,12 +19,11 @@ const gatheredFactsToListView = (gatheredFacts) =>
 function GatheredFacts({ isTargetHost = true, gatheredFacts = [] }) {
   return (
     <div className="w-full my-4 mr-4 bg-white shadow rounded-lg px-8 py-4">
-      <div className="text-lg font-bold">Facts</div>
+      <div className="text-lg font-bold">Gathered Facts</div>
 
       {gatheredFacts.length === 0 && (
         <div className="mt-3 text-sm text-red-500">No facts were gathered</div>
       )}
-
       {isTargetHost && (
         <ListView
           className="grid-flow-row mt-3 text-sm"

assets/js/components/ExecutionResults/CheckResultDetail/GatheredFacts.stories.jsx

@@ -0,0 +1,37 @@
+import { faker } from '@faker-js/faker';
+
+import GatheredFacts from './GatheredFacts';
+
+const factValues = {
+  application: faker.animal.bear(),
+  firewall: faker.lorem.sentence(),
+  protocol: faker.animal.bear(),
+  harddrive: faker.animal.bear(),
+  pixel: [
+    faker.lorem.sentence(),
+    faker.lorem.sentence(),
+    [faker.lorem.sentence(), faker.lorem.sentence()],
+  ],
+};
+export default {
+  title: 'GatheredFacts',
+  component: GatheredFacts,
+};
+
+export const Default = {
+  args: {
+    isTargetHost: true,
+    gatheredFacts: [
+      {
+        value: factValues,
+        type: faker.lorem.sentence(),
+        message: faker.lorem.sentence(),
+        name: faker.animal.bear(),
+      },
+      {
+        value: factValues,
+        name: faker.animal.bear(),
+      },
+    ],
+  },
+};