Merge pull request #1373 from w3c/development

Create April 10, 2025 Release

Includes the following changes:

* #1361 
* #1372, which addresses #1371

Author: howard-e

client/components/BotRunTestStatusList/BotRunTestStatusList.module.css

@@ -1,10 +1,15 @@
 .bot-run-test-container {
   font-size: var(--14px) !important;
-  padding: 0.5rem 0;
+  padding: 0.5rem;
   margin: 0.5rem 0;
 
   background: var(--bg-lighter-gray);
   border-radius: 0.25rem;
 
+  text-align: left;
   white-space: nowrap;
+
+  ul {
+    margin: 0;
+  }
 }

client/components/BotRunTestStatusList/index.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { TEST_PLAN_RUNS_TEST_RESULTS_QUERY } from './queries';
 import { useQuery } from '@apollo/client';
 import ReportStatusDot, { REPORT_STATUSES } from '../common/ReportStatusDot';
@@ -79,9 +80,9 @@ const BotRunTestStatusList = ({ testPlanReportId }) => {
 
   return (
     <>
-      <div className={styles.botRunTestContainer}>
+      <div className={clsx(styles.botRunTestContainer, 'text-secondary')}>
         Bot Status:
-        <ul className="text-secondary">
+        <ul>
           {RUNNING > 0 && (
             <li>
               <ReportStatusDot status={REPORT_STATUSES.TESTS_RUNNING} />

client/components/ManageBotRunDialog/ManageBotRunDialog.css

@@ -0,0 +1,9 @@
+.manage-bot-run-dialog {
+  .assign-testers-dropdown-button {
+    margin-right: 0;
+  }
+
+  .modal-footer button:not([role='menuitemcheckbox']) {
+    font-size: var(--12px);
+  }
+}

client/components/ManageBotRunDialog/ManageBotRunDialog.module.css

@@ -9,14 +9,15 @@ const RetryCanceledCollectionsButton = ({
   collectionJob,
   onClick = () => {}
 }) => {
+  const [retryCanceledCollections] = useMutation(RETRY_CANCELED_COLLECTIONS, {
+    variables: { collectionJobId: collectionJob.id },
+    skip: !collectionJob
+  });
+
   if (!collectionJob) {
     return null;
   }
 
-  const [retryCanceledCollections] = useMutation(RETRY_CANCELED_COLLECTIONS, {
-    variables: { collectionJobId: collectionJob.id }
-  });
-
   const handleClick = async () => {
     await retryCanceledCollections();
     await onClick();

client/components/ManageBotRunDialog/RetryCanceledCollectionsButton/index.jsx

@@ -7,18 +7,19 @@ import { LoadingStatus, useTriggerLoad } from '../../common/LoadingStatus';
 import { CollectionJobPropType } from '../../common/proptypes';
 
 const StopRunningCollectionButton = ({ collectionJob, onClick = () => {} }) => {
-  if (!collectionJob) {
-    return null;
-  }
-
   const { triggerLoad, loadingMessage } = useTriggerLoad();
 
   const [cancelCollectionJob] = useMutation(CANCEL_COLLECTION_JOB, {
     variables: {
       collectionJobId: collectionJob.id
-    }
+    },
+    skip: !collectionJob
   });
 
+  if (!collectionJob) {
+    return null;
+  }
+
   const handleClick = async () => {
     await triggerLoad(async () => {
       await cancelCollectionJob();

client/components/ManageBotRunDialog/StopRunningCollectionButton/index.jsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import BasicModal from '../common/BasicModal';
 import AssignTesterDropdown from '../common/AssignTesterDropdown';
 import { useMutation, useQuery } from '@apollo/client';
@@ -10,14 +11,13 @@ import {
 } from './queries';
 import DeleteButton from '../common/DeleteButton';
 import BotRunTestStatusList from '../BotRunTestStatusList';
-
-import './ManageBotRunDialog.css';
 import MarkBotRunFinishedButton from './MarkBotRunFinishedButton';
 import RetryCanceledCollectionsButton from './RetryCanceledCollectionsButton';
 import StopRunningCollectionButton from './StopRunningCollectionButton';
 import ViewLogsButton from './ViewLogsButton';
 import { TestPlanRunPropType, UserPropType } from '../common/proptypes';
 import { COLLECTION_JOB_STATUS } from '../../utils/collectionJobStatus';
+import styles from './ManageBotRunDialog.module.css';
 
 const ManageBotRunDialog = ({
   testPlanReportId,
@@ -103,14 +103,18 @@ const ManageBotRunDialog = ({
         }
       },
       {
-        component: StopRunningCollectionButton,
+        component: collectionJobQuery?.collectionJobByTestPlanRunId
+          ? StopRunningCollectionButton
+          : null,
         props: {
           collectionJob: collectionJobQuery?.collectionJobByTestPlanRunId,
           onClick: onChange
         }
       },
       {
-        component: RetryCanceledCollectionsButton,
+        component: collectionJobQuery?.collectionJobByTestPlanRunId
+          ? RetryCanceledCollectionsButton
+          : null,
         props: {
           collectionJob: collectionJobQuery?.collectionJobByTestPlanRunId,
           onClick: onChange
@@ -151,10 +155,13 @@ const ManageBotRunDialog = ({
     </>
   );
   const content = (
-    <BotRunTestStatusList
-      testPlanReportId={testPlanReportId}
-      runnableTestsLength={runnableTestsLength}
-    />
+    <>
+      View the bot&apos;s status and perform administrative bot actions.
+      <BotRunTestStatusList
+        testPlanReportId={testPlanReportId}
+        runnableTestsLength={runnableTestsLength}
+      />
+    </>
   );
 
   return (
@@ -185,7 +192,7 @@ const ManageBotRunDialog = ({
         title={`Manage ${testPlanRun.tester?.username} Run`}
         cancelButton={false}
         content={content}
-        dialogClassName="manage-bot-run-dialog"
+        dialogClassName={clsx(styles.manageBotRunDialog, 'modal-60w')}
         actions={actions}
       />
     </>

client/components/ManageBotRunDialog/index.jsx

@@ -108,9 +108,13 @@ table.test-queue {
 .assign-testers-container {
   display: flex;
 
+  .dropdown-button-label {
+    margin-right: var(--8px);
+  }
+
   [role='menu'] {
-    width: 15.625rem;
-    max-height: 12.5rem;
+    width: 15rem;
+    max-height: 8rem;
     overflow-y: scroll;
   }