Reusable proptypes (#1189)

* Reusable proptypes

* Update error catch timeout

* Return console errors with callback

* Ignore favicon errors

* Prevent default browser favicon fetch attempt

* Use improved favicon ignore strategy to prevent double fetch

* Remove comment in index.html

* Update snapshots

* Remove unnecessary assertions

* Update snapshots

* Remove errant variable

client/components/DataManagement/DataManagementRow/index.jsx

@@ -19,6 +19,11 @@ import VersionString from '../../common/VersionString';
 import PhasePill from '../../common/PhasePill';
 import { differenceBy, uniq as unique, uniqBy as uniqueBy } from 'lodash';
 import { getVersionData } from '../utils';
+import {
+  AtPropType,
+  TestPlanPropType,
+  TestPlanVersionPropType
+} from '../../common/proptypes';
 
 const StatusCell = styled.div`
   display: flex;
@@ -1089,32 +1094,16 @@ const DataManagementRow = ({
 
 DataManagementRow.propTypes = {
   isAdmin: PropTypes.bool,
-  ats: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string
-    })
-  ),
-  testPlan: PropTypes.shape({
-    id: PropTypes.string,
-    title: PropTypes.string,
-    directory: PropTypes.string
-  }).isRequired,
+  ats: PropTypes.arrayOf(AtPropType),
+  testPlan: TestPlanPropType.isRequired,
   testPlanVersions: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.string,
+      ...TestPlanVersionPropType,
+      // Optional in this component
       title: PropTypes.string,
-      phase: PropTypes.string,
-      gitSha: PropTypes.string,
-      testPlan: PropTypes.shape({
-        directory: PropTypes.string
-      }),
-      updatedAt: PropTypes.string,
-      draftPhaseReachedAt: PropTypes.string,
-      candidatePhaseReachedAt: PropTypes.string,
-      recommendedPhaseReachedAt: PropTypes.string
+      isRequired: PropTypes.bool
     })
-  ).isRequired,
+  ),
   tableRowIndex: PropTypes.number.isRequired,
   setTestPlanVersions: PropTypes.func
 };

client/components/ManageBotRunDialog/MarkBotRunFinishedButton/index.jsx

@@ -10,6 +10,7 @@ import { LoadingStatus, useTriggerLoad } from '../../common/LoadingStatus';
 import { useTestPlanRunValidatedAssertionCounts } from '../../../hooks/useTestPlanRunValidatedAssertionCounts';
 import BasicModal from '../../common/BasicModal';
 import { useTestPlanRunIsFinished } from '../../../hooks/useTestPlanRunIsFinished';
+import { TestPlanRunPropType } from '../../common/proptypes';
 
 const MarkBotRunFinishedButton = ({ testPlanRun, onClick = () => {} }) => {
   const {
@@ -86,7 +87,7 @@ const MarkBotRunFinishedButton = ({ testPlanRun, onClick = () => {} }) => {
 };
 
 MarkBotRunFinishedButton.propTypes = {
-  testPlanRun: PropTypes.object.isRequired,
+  testPlanRun: TestPlanRunPropType.isRequired,
   onClick: PropTypes.func
 };
 

client/components/ManageBotRunDialog/RetryCanceledCollectionsButton/index.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 import { useMutation } from '@apollo/client';
 import { RETRY_CANCELED_COLLECTIONS } from '../queries';
+import { CollectionJobPropType } from '../../common/proptypes';
 
 const RetryCanceledCollectionsButton = ({
   collectionJob,
@@ -33,16 +34,7 @@ const RetryCanceledCollectionsButton = ({
 };
 
 RetryCanceledCollectionsButton.propTypes = {
-  collectionJob: PropTypes.shape({
-    id: PropTypes.string,
-    status: PropTypes.oneOf([
-      'QUEUED',
-      'RUNNING',
-      'CANCELLED',
-      'COMPLETED',
-      'ERROR'
-    ])
-  }),
+  collectionJob: CollectionJobPropType,
   onClick: PropTypes.func
 };
 

client/components/ManageBotRunDialog/StopRunningCollectionButton/index.jsx

@@ -4,6 +4,7 @@ import { Button } from 'react-bootstrap';
 import { useMutation } from '@apollo/client';
 import { CANCEL_COLLECTION_JOB } from '../queries';
 import { LoadingStatus, useTriggerLoad } from '../../common/LoadingStatus';
+import { CollectionJobPropType } from '../../common/proptypes';
 
 const StopRunningCollectionButton = ({ collectionJob, onClick = () => {} }) => {
   if (!collectionJob) {
@@ -44,16 +45,7 @@ const StopRunningCollectionButton = ({ collectionJob, onClick = () => {} }) => {
 };
 
 StopRunningCollectionButton.propTypes = {
-  collectionJob: PropTypes.shape({
-    id: PropTypes.string,
-    status: PropTypes.oneOf([
-      'QUEUED',
-      'RUNNING',
-      'CANCELLED',
-      'COMPLETED',
-      'ERROR'
-    ]).isRequired
-  }),
+  collectionJob: CollectionJobPropType,
   onClick: PropTypes.func
 };
 

client/components/ManageBotRunDialog/WithButton.jsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRobot } from '@fortawesome/free-solid-svg-icons';
 import ManageBotRunDialog from '.';
 import { useTestPlanRunIsFinished } from '../../hooks/useTestPlanRunIsFinished';
+import { TestPlanRunPropType, UserPropType } from '../common/proptypes';
 
 const ManageBotRunDialogWithButton = ({
   testPlanRun,
@@ -49,10 +50,10 @@ const ManageBotRunDialogWithButton = ({
 };
 
 ManageBotRunDialogWithButton.propTypes = {
-  testPlanRun: PropTypes.object.isRequired,
+  testPlanRun: TestPlanRunPropType.isRequired,
   testPlanReportId: PropTypes.string.isRequired,
   runnableTestsLength: PropTypes.number.isRequired,
-  testers: PropTypes.array.isRequired,
+  testers: PropTypes.arrayOf(UserPropType).isRequired,
   onChange: PropTypes.func.isRequired
 };
 

client/components/ManageBotRunDialog/index.jsx

@@ -16,6 +16,7 @@ import MarkBotRunFinishedButton from './MarkBotRunFinishedButton';
 import RetryCanceledCollectionsButton from './RetryCanceledCollectionsButton';
 import StopRunningCollectionButton from './StopRunningCollectionButton';
 import ViewLogsButton from './ViewLogsButton';
+import { TestPlanRunPropType, UserPropType } from '../common/proptypes';
 
 const ManageBotRunDialog = ({
   testPlanReportId,
@@ -177,10 +178,10 @@ const ManageBotRunDialog = ({
 };
 
 ManageBotRunDialog.propTypes = {
-  testPlanRun: PropTypes.object.isRequired,
+  testPlanRun: TestPlanRunPropType.isRequired,
   show: PropTypes.bool.isRequired,
   setShow: PropTypes.func.isRequired,
-  testers: PropTypes.array.isRequired,
+  testers: PropTypes.arrayOf(UserPropType).isRequired,
   testPlanReportId: PropTypes.string.isRequired,
   runnableTestsLength: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired

client/components/ManageTestQueue/ManageAtVersions.jsx

@@ -15,6 +15,7 @@ import {
 import { useTriggerLoad } from '@components/common/LoadingStatus';
 import { THEMES, useThemedModal } from '@client/hooks/useThemedModal';
 import PropTypes from 'prop-types';
+import { AtPropType } from '../common/proptypes';
 
 const ManageAtVersions = ({ ats = [], triggerUpdate = () => {} }) => {
   const { triggerLoad } = useTriggerLoad();
@@ -410,20 +411,7 @@ const ManageAtVersions = ({ ats = [], triggerUpdate = () => {} }) => {
 };
 
 ManageAtVersions.propTypes = {
-  ats: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      key: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      browsers: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          key: PropTypes.string.isRequired,
-          name: PropTypes.string.isRequired
-        })
-      ).isRequired
-    })
-  ).isRequired,
+  ats: PropTypes.arrayOf(AtPropType).isRequired,
   triggerUpdate: PropTypes.func
 };
 

client/components/ManageTestQueue/index.jsx

@@ -5,6 +5,7 @@ import { LoadingStatus, useTriggerLoad } from '../common/LoadingStatus';
 import DisclosureComponent from '../common/DisclosureComponent';
 import ManageAtVersions from '@components/ManageTestQueue/ManageAtVersions';
 import AddTestPlans from '@components/ManageTestQueue/AddTestPlans';
+import { AtPropType, TestPlanVersionPropType } from '../common/proptypes';
 
 export const DisclosureContainer = styled.div`
   // Following directives are related to the ManageTestQueue component
@@ -148,21 +149,8 @@ const ManageTestQueue = ({
 };
 
 ManageTestQueue.propTypes = {
-  ats: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      key: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      browsers: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          key: PropTypes.string.isRequired,
-          name: PropTypes.string.isRequired
-        })
-      ).isRequired
-    })
-  ).isRequired,
-  testPlanVersions: PropTypes.array,
+  ats: PropTypes.arrayOf(AtPropType).isRequired,
+  testPlanVersions: PropTypes.arrayOf(TestPlanVersionPropType),
   triggerUpdate: PropTypes.func
 };
 

client/components/Reports/SummarizeTestPlanReport.jsx

@@ -18,6 +18,10 @@ import TestPlanResultsTable from '../common/TestPlanResultsTable';
 import DisclosureComponent from '../common/DisclosureComponent';
 import { Link, Navigate, useLocation, useParams } from 'react-router-dom';
 import createIssueLink from '../../utils/createIssueLink';
+import {
+  TestPlanReportPropType,
+  TestPlanVersionPropType
+} from '../common/proptypes';
 
 const ResultsContainer = styled.div`
   padding: 1em 1.75em;
@@ -378,60 +382,8 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
 };
 
 SummarizeTestPlanReport.propTypes = {
-  testPlanVersion: PropTypes.object.isRequired,
-  testPlanReports: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      runnableTests: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
-      at: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
-      }).isRequired,
-      browser: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
-      }).isRequired,
-      finalizedTestResults: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          test: PropTypes.shape({
-            title: PropTypes.string.isRequired,
-            renderedUrl: PropTypes.string.isRequired
-          }).isRequired,
-          scenarioResults: PropTypes.arrayOf(
-            PropTypes.shape({
-              id: PropTypes.string.isRequired,
-              output: PropTypes.string.isRequired,
-              assertionResults: PropTypes.arrayOf(
-                PropTypes.shape({
-                  id: PropTypes.string.isRequired,
-                  passed: PropTypes.bool.isRequired,
-                  assertion: PropTypes.shape({
-                    text: PropTypes.string.isRequired
-                  }).isRequired
-                }).isRequired
-              ).isRequired,
-              unexpectedBehaviors: PropTypes.arrayOf(
-                PropTypes.shape({
-                  id: PropTypes.string.isRequired,
-                  text: PropTypes.string.isRequired,
-                  impact: PropTypes.string.isRequired,
-                  details: PropTypes.string.isRequired
-                }).isRequired
-              ).isRequired
-            }).isRequired
-          ).isRequired
-        }).isRequired
-      ).isRequired,
-      draftTestPlanRuns: PropTypes.arrayOf(
-        PropTypes.shape({
-          tester: PropTypes.shape({
-            username: PropTypes.string.isRequired
-          })
-        })
-      )
-    }).isRequired
-  )
+  testPlanVersion: TestPlanVersionPropType.isRequired,
+  testPlanReports: PropTypes.arrayOf(TestPlanReportPropType).isRequired
 };
 
 export default SummarizeTestPlanReport;

client/components/Reports/SummarizeTestPlanReports.jsx

@@ -9,6 +9,7 @@ import { derivePhaseName } from '../../utils/aria';
 import { none } from './None';
 import { getTestPlanTargetTitle, getTestPlanVersionTitle } from './getTitles';
 import ClippedProgressBar from '@components/common/ClippedProgressBar';
+import { TestPlanVersionPropType } from '../common/proptypes';
 
 const FullHeightContainer = styled(Container)`
   min-height: calc(100vh - 64px);
@@ -151,26 +152,7 @@ const SummarizeTestPlanReports = ({ testPlanVersions }) => {
 };
 
 SummarizeTestPlanReports.propTypes = {
-  testPlanVersions: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      phase: PropTypes.string.isRequired,
-      gitSha: PropTypes.string,
-      testPlan: PropTypes.shape({
-        directory: PropTypes.string
-      }),
-      metadata: PropTypes.object,
-      testPlanReports: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          metrics: PropTypes.object.isRequired,
-          at: PropTypes.object.isRequired,
-          browser: PropTypes.object.isRequired
-        })
-      )
-    })
-  ).isRequired
+  testPlanVersions: PropTypes.arrayOf(TestPlanVersionPropType).isRequired
 };
 
 export default SummarizeTestPlanReports;

client/components/Reports/SummarizeTestPlanVersion.jsx

@@ -11,6 +11,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHome } from '@fortawesome/free-solid-svg-icons';
 import styled from '@emotion/styled';
 import DisclaimerInfo from '../DisclaimerInfo';
+import {
+  TestPlanReportPropType,
+  TestPlanVersionPropType
+} from '../common/proptypes';
 
 const FullHeightContainer = styled(Container)`
   min-height: calc(100vh - 64px);
@@ -183,26 +187,8 @@ const SummarizeTestPlanVersion = ({ testPlanVersion, testPlanReports }) => {
 };
 
 SummarizeTestPlanVersion.propTypes = {
-  testPlanVersion: PropTypes.shape({
-    gitSha: PropTypes.string,
-    testPlan: PropTypes.object,
-    directory: PropTypes.string,
-    versionString: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    phase: PropTypes.string,
-    metadata: PropTypes.shape({
-      exampleUrl: PropTypes.string.isRequired,
-      designPatternUrl: PropTypes.string
-    }).isRequired
-  }).isRequired,
-  testPlanReports: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      runnableTests: PropTypes.arrayOf(PropTypes.object).isRequired,
-      finalizedTestResults: PropTypes.arrayOf(PropTypes.object)
-    }).isRequired
-  ).isRequired
+  testPlanVersion: TestPlanVersionPropType.isRequired,
+  testPlanReports: PropTypes.arrayOf(TestPlanReportPropType).isRequired
 };
 
 export default SummarizeTestPlanVersion;