[SFT-1608]: Write integration for Form Monitor

composer.json

@@ -50,7 +50,7 @@
     "fix:dry-run": "vendor/bin/php-cs-fixer fix --dry-run --diff  --config=./.php-cs-fixer.dist.php"
   },
   "extra": {
-    "schemaVersion": "5.4.0",
+    "schemaVersion": "5.5.0",
     "handle": "freeform",
     "class": "Solspace\\Freeform\\Freeform",
     "name": "Freeform",

packages/client/src/app/pages/form-monitor/form-monitor.empty.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EmptyBlock } from '@components/empty-block/empty-block';
+import translate from '@ff-client/utils/translations';
+
+import { FormMonitorWrapper } from './form-monitor.styles';
+
+export const FMEmptyTests: React.FC = () => {
+  return (
+    <FormMonitorWrapper>
+      <EmptyBlock lite title={translate('No form tests found')} />
+    </FormMonitorWrapper>
+  );
+};

packages/client/src/app/pages/form-monitor/form-monitor.forms.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const FMFormsList: React.FC = () => {
+  return <div></div>;
+};

packages/client/src/app/pages/form-monitor/form-monitor.queries.ts

@@ -0,0 +1,41 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export const QKFormMonitor = {
+  forms: ['form-monitor', 'forms'],
+  formTests: (id?: number) =>
+    id !== undefined
+      ? [...QKFormMonitor.forms, id, 'form-tests']
+      : [...QKFormMonitor.forms, 'tests'],
+} as const;
+
+export const useFMForms = (): UseQueryResult<number[]> => {
+  return useQuery(QKFormMonitor.forms, () =>
+    axios.get<number[]>('/api/form-monitor/forms').then((res) => res.data)
+  );
+};
+
+type FMTest = {
+  id: string;
+  formId: number;
+  dateAttempted: string;
+  dateCompleted: string;
+  status: 'success' | 'fail';
+  response: null | string;
+  responseCode: number;
+};
+
+type FMTestsResponse = FMTest[];
+
+export const useFMFormTestsQuery = (
+  id?: number
+): UseQueryResult<FMTestsResponse> => {
+  const url = id
+    ? `/api/form-monitor/forms/${id}/tests`
+    : '/api/form-monitor/tests';
+
+  return useQuery(QKFormMonitor.formTests(id), () =>
+    axios.get<FMTestsResponse>(url).then((res) => res.data)
+  );
+};

packages/client/src/app/pages/form-monitor/form-monitor.styles.tsx

@@ -0,0 +1,69 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import { Breadcrumb } from '@components/breadcrumbs/breadcrumbs';
+import { ContentContainer } from '@components/layout/blocks/content-container';
+import { HeaderContainer } from '@components/layout/blocks/header-container';
+import { colors } from '@ff-client/styles/variables';
+import translate from '@ff-client/utils/translations';
+import styled from 'styled-components';
+
+export const FormMonitorWrapper: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <div>
+      <Breadcrumb
+        id="form-monitor"
+        label={translate('Form Monitor')}
+        url="/form-monitor"
+      />
+
+      <HeaderContainer>{translate('Form Monitor')}</HeaderContainer>
+
+      <div id="main-content">
+        <ContentContainer>
+          <div id="content">{children}</div>
+        </ContentContainer>
+      </div>
+    </div>
+  );
+};
+
+export const TestBlock = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+export const TestTable = styled.table`
+  thead th {
+    white-space: nowrap;
+  }
+
+  tbody td {
+    vertical-align: top;
+
+    &.no-break {
+      white-space: nowrap;
+    }
+  }
+
+  .status-col {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+  }
+`;
+
+export const StatusBadge = styled.div`
+  padding: 1px 5px;
+
+  border-radius: 5px;
+
+  font-size: 10px;
+  color: ${colors.white};
+  background-color: ${colors.teal500};
+
+  &.status-fail {
+    background-color: ${colors.red500};
+  }
+`;

packages/client/src/app/pages/form-monitor/form-monitor.tests.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { useSidebarSelect } from '@ff-client/hooks/use-sidebar-select';
+import { useQueryFormsWithStats } from '@ff-client/queries/forms';
+import { scrollBar } from '@ff-client/styles/mixins';
+import { borderRadius, colors, spacings } from '@ff-client/styles/variables';
+import translate from '@ff-client/utils/translations';
+import { format, parseISO } from 'date-fns';
+import styled from 'styled-components';
+
+import { FMEmptyTests } from './form-monitor.empty';
+import { useFMFormTestsQuery } from './form-monitor.queries';
+import {
+  FormMonitorWrapper,
+  StatusBadge,
+  TestTable,
+} from './form-monitor.styles';
+
+const CodeBlock = styled.div`
+  position: relative;
+
+  padding: ${spacings.sm} ${spacings.md};
+
+  font-family: monospace;
+
+  background: ${colors.gray050};
+  border: 1px solid ${colors.hairline};
+  border-radius: ${borderRadius.lg};
+
+  max-height: 60px;
+  overflow-y: auto;
+
+  ${scrollBar};
+`;
+
+export const FMTests: React.FC = () => {
+  const { formId } = useParams();
+
+  const { data: forms } = useQueryFormsWithStats();
+  const { data, isFetching } = useFMFormTestsQuery(Number(formId));
+
+  useSidebarSelect(5);
+
+  return (
+    <FormMonitorWrapper>
+      {data === undefined && isFetching && <div>{translate('Loading...')}</div>}
+      {data && data.length === 0 && <FMEmptyTests />}
+      {data !== undefined && data.length > 0 && (
+        <TestTable>
+          <thead>
+            <tr>
+              <th>{translate('Test ID')}</th>
+              <th>{translate('Date')}</th>
+              <th>{translate('Form')}</th>
+              <th>{translate('Status')}</th>
+              <th>{translate('Response')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((test) => {
+              const form = forms.find((form) => form.id === test.formId);
+              if (!form) {
+                return null;
+              }
+
+              return (
+                <tr key={test.id}>
+                  <td className="no-break">#{test.id}</td>
+                  <td className="no-break" title={test.dateCompleted}>
+                    {format(parseISO(test.dateCompleted), 'do MMM yyyy')}
+                  </td>
+                  <td>
+                    <Link to={`/forms/${form.id}`}>{form.name}</Link>
+                  </td>
+                  <td className="status-col no-break">
+                    <StatusBadge className={`status-${test.status}`}>
+                      {test.responseCode}
+                    </StatusBadge>
+                    <div>{test.status}</div>
+                  </td>
+                  <td className="code" title={test.response}>
+                    {!!test.response && <CodeBlock>{test.response}</CodeBlock>}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </TestTable>
+      )}
+    </FormMonitorWrapper>
+  );
+};

packages/client/src/app/pages/form-monitor/form-monitor.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { EmptyBlock } from '@components/empty-block/empty-block';
+import config, { Edition } from '@config/freeform/freeform.config';
+import { useSidebarSelect } from '@ff-client/hooks/use-sidebar-select';
+import { useQueryFormsWithStats } from '@ff-client/queries/forms';
+import translate from '@ff-client/utils/translations';
+
+import { useFMForms } from './form-monitor.queries';
+import { FormMonitorWrapper } from './form-monitor.styles';
+
+export const FormMonitor: React.FC = () => {
+  const isPro = config.editions.isAtLeast(Edition.Pro);
+  useSidebarSelect(5);
+
+  const { data: forms, isFetching: isFetchingForms } = useQueryFormsWithStats();
+  const { data: formIds, isFetching: isFetchingFormids } = useFMForms();
+
+  const isLoading =
+    (!forms || !formIds) && (isFetchingForms || isFetchingFormids);
+
+  if (!isPro) {
+    return (
+      <FormMonitorWrapper>
+        <EmptyBlock
+          lite
+          title={translate(
+            'Upgrade to the Freeform Pro edition to get access to Form Monitor'
+          )}
+        />
+      </FormMonitorWrapper>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <FormMonitorWrapper>
+        <div>{translate('Loading...')}</div>
+      </FormMonitorWrapper>
+    );
+  }
+
+  return (
+    <FormMonitorWrapper>
+      <ul>
+        {formIds.map((id) => {
+          const form = forms.find((form) => form.id === id);
+          if (!form) {
+            return null;
+          }
+
+          return (
+            <li key={id}>
+              <Link to={`${id}/tests`}>{form.name}</Link>
+            </li>
+          );
+        })}
+      </ul>
+    </FormMonitorWrapper>
+  );
+};

packages/client/src/app/pages/import-export/index.tsx

@@ -10,7 +10,7 @@ import { ImportExportWrapper } from './index.styles';
 
 export const ImportExport: React.FC = () => {
   const { pathname } = useLocation();
-  useSidebarSelect(4);
+  useSidebarSelect(3);
   useQueryFormsWithStats();
 
   let title: string;

packages/client/src/app/pages/limited-users/limited-users.tsx

@@ -22,7 +22,7 @@ export const LimitedUsers: React.FC = () => {
   const isPro = config.editions.isAtLeast(Edition.Pro);
   const isCraft5 = config.metadata.craft.is5;
 
-  useSidebarSelect(5);
+  useSidebarSelect(4);
 
   if (!data && isFetching) {
     return <div>Loading...</div>;

packages/client/src/index.tsx

@@ -17,6 +17,8 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import '../config';
 
+import { FormMonitor } from './app/pages/form-monitor/form-monitor';
+import { FMTests } from './app/pages/form-monitor/form-monitor.tests';
 import { Form, Forms } from './app/pages/forms';
 import { ImportExport } from './app/pages/import-export';
 import { ExportFreeform } from './app/pages/import-export/export/views/freeform/freeform';
@@ -95,6 +97,10 @@ root.render(
                             />
                             <Route index element={<LimitedUsers />} />
                           </Route>
+                          <Route path="form-monitor">
+                            <Route index element={<FormMonitor />} />
+                            <Route path=":formId/tests" element={<FMTests />} />
+                          </Route>
                         </Route>
                       </Routes>
                     </ModalProvider>

packages/plugin/src/Bundles/Notifications/Providers/NotificationsProvider.php

@@ -38,6 +38,16 @@ public function getRecordsByForm(?Form $form = null): array
         ;
     }
 
+    public function getByFormAndId(Form $form, int $id): ?NotificationInterface
+    {
+        $record = FormNotificationRecord::findOne([
+            'formId' => $form->getId(),
+            'id' => $id,
+        ]);
+
+        return $record ? $this->createNotificationObjects($record) : null;
+    }
+
     public function getByForm(?Form $form = null): array
     {
         $records = $this->getRecordsByForm($form);

packages/plugin/src/Bundles/Notifications/SendListeners/AdminNotifications.php

@@ -67,6 +67,7 @@ public function sendToRecipients(SendNotificationsEvent $event): void
                     'postedData' => $postedData,
                     'recipients' => $recipients,
                     'template' => $template,
+                    'notificationType' => Admin::class,
                 ])
             );
         }

packages/plugin/src/Bundles/Notifications/SendListeners/ConditionalNotifications.php

@@ -115,6 +115,7 @@ public function sendToRecipients(SendNotificationsEvent $event): void
                     'postedData' => $postedData,
                     'recipients' => $recipients,
                     'template' => $template,
+                    'notificationType' => Conditional::class,
                 ])
             );
         }

packages/plugin/src/Bundles/Notifications/SendListeners/DynamicRecipients.php

@@ -85,6 +85,7 @@ public function sendToRecipients(SendNotificationsEvent $event): void
                         'postedData' => $postedData,
                         'recipients' => $recipients,
                         'template' => $template,
+                        'notificationType' => Dynamic::class,
                     ])
                 );
             }

packages/plugin/src/Bundles/Notifications/SendListeners/DynamicTemplateRecipients.php

@@ -78,6 +78,7 @@ public function sendToRecipients(SendNotificationsEvent $event): void
                 'postedData' => $postedData,
                 'recipients' => $recipientCollection,
                 'template' => $notificationTemplate,
+                'notificationType' => 'DynamicTemplate',
             ])
         );
     }

packages/plugin/src/Bundles/Notifications/SendListeners/EmailRecipientNotifications.php

@@ -77,6 +77,7 @@ public function sendToRecipients(SendNotificationsEvent $event): void
                     'postedData' => $postedData,
                     'recipients' => $recipientCollection,
                     'template' => $notificationTemplate,
+                    'notificationType' => EmailField::class,
                 ])
             );
         }