B 21339 int - Bulk assignment modal: UI Layout and populate data (SC/TOO)

.circleci/config.yml

@@ -945,6 +945,7 @@ commands:
             FEATURE_FLAG_UNACCOMPANIED_BAGGAGE: 'false'
             FEATURE_FLAG_ENABLE_ALASKA: 'false'
             FEATURE_FLAG_BULK_ASSIGNMENT: 'false'
+
           command: |
             SHARD=$((${CIRCLE_NODE_INDEX}+1))
             PLAYWRIGHT_JUNIT_OUTPUT_NAME=playwright-results.xml \

config/env/demo.app-client-tls.env

@@ -50,4 +50,4 @@ FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
 FEATURE_FLAG_ENABLE_HAWAII=false
-FEATURE_FLAG_BULK_ASSIGNMENT=false
+FEATURE_FLAG_BULK_ASSIGNMENT=false

config/env/demo.app.env

@@ -55,4 +55,4 @@ FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
 FEATURE_FLAG_ENABLE_HAWAII=false
-FEATURE_FLAG_BULK_ASSIGNMENT=false
+FEATURE_FLAG_BULK_ASSIGNMENT=false

go.mod

@@ -95,10 +95,10 @@ require (
 	go.opentelemetry.io/otel/sdk/metric v1.28.0
 	go.opentelemetry.io/otel/trace v1.31.0
 	go.uber.org/zap v1.27.0
-	golang.org/x/crypto v0.27.0
+	golang.org/x/crypto v0.31.0
 	golang.org/x/net v0.29.0
 	golang.org/x/oauth2 v0.23.0
-	golang.org/x/text v0.18.0
+	golang.org/x/text v0.21.0
 	golang.org/x/tools v0.24.0
 	google.golang.org/grpc v1.68.0
 	gopkg.in/dnaeon/go-vcr.v3 v3.2.0
@@ -261,10 +261,10 @@ require (
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9
 	golang.org/x/image v0.18.0 // indirect
 	golang.org/x/mod v0.20.0 // indirect
-	golang.org/x/sync v0.8.0 // indirect
-	golang.org/x/sys v0.25.0 // indirect
-	golang.org/x/term v0.24.0 // indirect
-	google.golang.org/genproto v0.0.0-20240401170217-c3f982113cda // indirect
+	golang.org/x/sync v0.10.0 // indirect
+	golang.org/x/sys v0.28.0 // indirect
+	golang.org/x/term v0.27.0 // indirect
+	google.golang.org/genproto v0.0.0-20240401170217-c3f982113cda
 	google.golang.org/genproto/googleapis/api v0.0.0-20240903143218-8af14fe29dc1 // indirect
 	google.golang.org/genproto/googleapis/rpc v0.0.0-20240903143218-8af14fe29dc1 // indirect
 	google.golang.org/protobuf v1.34.2 // indirect

go.sum

@@ -723,8 +723,8 @@ golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliY
 golang.org/x/crypto v0.17.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
 golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
 golang.org/x/crypto v0.21.0/go.mod h1:0BP7YvVV9gBbVKyeTG0Gyn+gZm94bibOW5BjDEYAOMs=
-golang.org/x/crypto v0.27.0 h1:GXm2NjJrPaiv/h1tb2UH8QfgC/hOf/+z0p6PT8o1w7A=
-golang.org/x/crypto v0.27.0/go.mod h1:1Xngt8kV6Dvbssa53Ziq6Eqn0HqbZi5Z6R0ZpwQzt70=
+golang.org/x/crypto v0.31.0 h1:ihbySMvVjLAeSH1IbfcRTkD/iNscyz8rGzjF/E5hV6U=
+golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9 h1:GoHiUyI/Tp2nVkLI2mCxVkOjsbSXD66ic0XW0js0R9g=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9/go.mod h1:S2oDrQGGwySpoQPVqRShND87VCbxmc6bL1Yd2oYrm6k=
@@ -790,8 +790,8 @@ golang.org/x/sync v0.0.0-20220929204114-8fcdb60fdcc0/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
 golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
-golang.org/x/sync v0.8.0 h1:3NFvSEYkUoMifnESzZl15y791HH1qU2xm6eCJU5ZPXQ=
-golang.org/x/sync v0.8.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.10.0 h1:3NQrjDixjgGwUOCaF8w2+VYHv0Ve/vGYSbdkTa98gmQ=
+golang.org/x/sync v0.10.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180905080454-ebe1bf3edb33/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -831,8 +831,8 @@ golang.org/x/sys v0.14.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/sys v0.25.0 h1:r+8e+loiHxRqhXVl6ML1nO3l1+oFoWbnlu2Ehimmi34=
-golang.org/x/sys v0.25.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
 golang.org/x/term v0.0.0-20201117132131-f5c789dd3221/go.mod h1:Nr5EML6q2oocZ2LXRh80K7BxOlk5/8JxuGnuhpl+muw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
@@ -849,8 +849,8 @@ golang.org/x/term v0.12.0/go.mod h1:owVbMEjm3cBLCHdkQu9b1opXd4ETQWc3BhuQGKgXgvU=
 golang.org/x/term v0.15.0/go.mod h1:BDl952bC7+uMoWR75FIrCDx79TPU9oHkTZ9yRbYOrX0=
 golang.org/x/term v0.17.0/go.mod h1:lLRBjIVuehSbZlaOtGMbcMncT+aqLLLmKrsjNrUguwk=
 golang.org/x/term v0.18.0/go.mod h1:ILwASektA3OnRv7amZ1xhE/KTR+u50pbXfZ03+6Nx58=
-golang.org/x/term v0.24.0 h1:Mh5cbb+Zk2hqqXNO7S1iTjEphVL+jb8ZWaqh/g+JWkM=
-golang.org/x/term v0.24.0/go.mod h1:lOBK/LVxemqiMij05LGJ0tzNr8xlmwBRJ81PX6wVLH8=
+golang.org/x/term v0.27.0 h1:WP60Sv1nlK1T6SupCHbXzSaN0b9wUmsPoRS9b61A23Q=
+golang.org/x/term v0.27.0/go.mod h1:iMsnZpn0cago0GOrHO2+Y7u7JPn5AylBrcoWkElMTSM=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
@@ -863,8 +863,8 @@ golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/text v0.11.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-golang.org/x/text v0.18.0 h1:XvMDiNzPAl0jr17s6W9lcaIhGUfUORdGCNsuLmPG224=
-golang.org/x/text v0.18.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=

migrations/app/migrations_manifest.txt

@@ -1072,3 +1072,4 @@
 20250103130619_revert_data_change_for_gbloc_for_ak.up.sql
 20250103180420_update_pricing_proc_to_use_local_price_variable.up.sql
 20250110153428_add_shipment_address_updates_to_move_history.up.sql
+20250110214012_homesafeconnect_cert.up.sql

migrations/app/secure/20250110214012_homesafeconnect_cert.up.sql

@@ -0,0 +1,4 @@
+-- Local test migration.
+-- This will be run on development environments.
+-- It should mirror what you intend to apply on prd/stg/exp/demo
+-- DO NOT include any sensitive data.

package.json

@@ -77,7 +77,7 @@
     "reselect": "^4.1.8",
     "sass": "^1.77.6",
     "swagger-client": "^3.18.5",
-    "swagger-ui-dist": "^5.2.0",
+    "swagger-ui-dist": "^5.18.2",
     "uswds": "2.13.3",
     "uuid": "^9.0.0",
     "webpack": "5",

playwright/tests/office/servicescounseling/servicesCounselingFlows.spec.js

@@ -323,6 +323,8 @@ test.describe('Services counselor user', () => {
       await expect(page.getByText(LocationLookup, { exact: true })).toBeVisible();
       await page.keyboard.press('Enter');
       await page.locator('select[name="destinationType"]').selectOption({ label: 'Home of selection (HOS)' });
+      await page.getByLabel('Requested pickup date').fill('16 Mar 2022');
+
       await page.locator('[data-testid="submitForm"]').click();
       await scPage.waitForLoading();
 

src/components/BulkAssignment/BulkAssignmentModal.jsx

@@ -2,45 +2,78 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@trussworks/react-uswds';
 
+import styles from './BulkAssignmentModal.module.scss';
+
 import Modal, { ModalTitle, ModalClose, ModalActions, connectModal } from 'components/Modal/Modal';
 
-export const BulkAssignmentModal = ({ onClose, onSubmit, title, content, submitText, closeText }) => (
-  <Modal>
-    <ModalClose handleClick={() => onClose()} />
-    <ModalTitle>
-      <h3>{title}</h3>
-    </ModalTitle>
-    <p>{content}</p>
-    <ModalActions autofocus="true">
-      <Button
-        data-focus="true"
-        className="usa-button--destructive"
-        type="submit"
-        data-testid="modalSubmitButton"
-        onClick={() => onSubmit()}
-      >
-        {submitText}
-      </Button>
-      <Button className="usa-button--secondary" type="button" onClick={() => onClose()} data-testid="modalBackButton">
-        {closeText}
-      </Button>
-    </ModalActions>
-  </Modal>
+export const BulkAssignmentModal = ({ onClose, onSubmit, title, submitText, closeText, bulkAssignmentData }) => (
+  <div>
+    <Modal className={styles.BulkModal}>
+      <ModalClose handleClick={() => onClose()} />
+      <ModalTitle>
+        <h3>{title}</h3>
+      </ModalTitle>
+      <div className={styles.BulkAssignmentTable}>
+        <table>
+          <tr>
+            <th>Select/Deselect All </th>
+            <th>User</th>
+            <th>Workload</th>
+            <th>Assignment</th>
+          </tr>
+          {Object.prototype.hasOwnProperty.call(bulkAssignmentData, 'availableOfficeUsers')
+            ? bulkAssignmentData.availableOfficeUsers.map((user) => {
+                return (
+                  <tr key={user}>
+                    <td className={styles.BulkAssignmentDataCenter}>
+                      <input type="checkbox" />
+                    </td>
+                    <td>
+                      <p data-testid="bulkAssignmentUser">
+                        {user.lastName}, {user.firstName}
+                      </p>
+                    </td>
+                    <td className={styles.BulkAssignmentDataCenter}>
+                      <p data-testid="bulkAssignmentUserWorkload">{user.workload || 0}</p>
+                    </td>
+                    <td className={styles.BulkAssignmentDataCenter}>
+                      <input className={styles.BulkAssignmentAssignment} type="number" />
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </table>
+      </div>
+      <ModalActions autofocus="true">
+        <Button
+          data-focus="true"
+          className="usa-button--destructive"
+          type="submit"
+          data-testid="modalSubmitButton"
+          onClick={() => onSubmit()}
+        >
+          {submitText}
+        </Button>
+        <Button className="usa-button--secondary" type="button" onClick={() => onClose()} data-testid="modalBackButton">
+          {closeText}
+        </Button>
+      </ModalActions>
+    </Modal>
+  </div>
 );
 
 BulkAssignmentModal.propTypes = {
   onClose: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
 
   title: PropTypes.string,
-  content: PropTypes.string,
   submitText: PropTypes.string,
   closeText: PropTypes.string,
 };
 
 BulkAssignmentModal.defaultProps = {
   title: 'Bulk Assignment',
-  content: 'Here we will display moves to be assigned in bulk.',
   submitText: 'Save',
   closeText: 'Cancel',
 };

src/components/BulkAssignment/BulkAssignmentModal.module.scss

@@ -0,0 +1,22 @@
+.BulkModal {
+  min-width: 900px !important;
+  overflow-y: auto;
+  max-height: 90vh;
+}
+
+.BulkAssignmentTable {
+
+  table {
+    th {
+      max-width: 10px;
+      text-align: center;
+    }
+    .BulkAssignmentDataCenter {
+      text-align: center;
+    }
+    .BulkAssignmentAssignment {
+        width: 60px;
+        text-align: center;
+    }
+  }
+}

src/components/BulkAssignment/BulkAssignmentModal.test.jsx

@@ -11,15 +11,39 @@ beforeEach(() => {
   onSubmit = jest.fn();
 });
 
+const data = {
+  availableOfficeUsers: [
+    {
+      firstName: 'John',
+      lastName: 'Snow',
+      officeUserId: '123',
+      workload: 0,
+    },
+    {
+      firstName: 'Jane',
+      lastName: 'Doe',
+      officeUserId: '456',
+      workload: 1,
+    },
+    {
+      firstName: 'Jimmy',
+      lastName: 'Page',
+      officeUserId: '789',
+      workload: 50,
+    },
+  ],
+  bulkAssignmentMoveIDs: ['1', '2', '3', '4', '5'],
+};
+
 describe('BulkAssignmentModal', () => {
   it('renders the component', async () => {
-    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} bulkAssignmentData={data} />);
 
     expect(await screen.findByRole('heading', { level: 3, name: 'Bulk Assignment' })).toBeInTheDocument();
   });
 
   it('closes the modal when close icon is clicked', async () => {
-    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} bulkAssignmentData={data} />);
 
     const closeButton = await screen.findByTestId('modalCloseButton');
 
@@ -29,7 +53,7 @@ describe('BulkAssignmentModal', () => {
   });
 
   it('closes the modal when the Cancel button is clicked', async () => {
-    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} bulkAssignmentData={data} />);
 
     const cancelButton = await screen.findByRole('button', { name: 'Cancel' });
 
@@ -39,12 +63,27 @@ describe('BulkAssignmentModal', () => {
   });
 
   it('calls the submit function when Save button is clicked', async () => {
-    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} bulkAssignmentData={data} />);
 
     const saveButton = await screen.findByRole('button', { name: 'Save' });
 
     await userEvent.click(saveButton);
 
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
+
+  it('renders the user data', async () => {
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} bulkAssignmentData={data} />);
+
+    const userTable = await screen.findByRole('table');
+
+    expect(userTable).toBeInTheDocument();
+    expect(screen.getByText('Select/Deselect All')).toBeInTheDocument();
+    expect(screen.getByText('User')).toBeInTheDocument();
+    expect(screen.getByText('Workload')).toBeInTheDocument();
+    expect(screen.getByText('Assignment')).toBeInTheDocument();
+
+    expect(screen.getByText('Snow, John')).toBeInTheDocument();
+    expect(screen.getAllByTestId('bulkAssignmentUserWorkload')[0]).toHaveTextContent('0');
+  });
 });

src/components/Office/AddOrdersForm/AddOrdersForm.test.jsx

@@ -453,3 +453,23 @@ describe('AddOrdersForm - With Counseling Office', () => {
     expect(nextBtn.getAttribute('disabled')).toBeFalsy();
   });
 });
+describe('AddOrdersForm - Edge Cases and Additional Scenarios', () => {
+  it('disables orders type when safety move is selected', async () => {
+    render(
+      <Provider store={mockStore.store}>
+        <AddOrdersForm {...testProps} isSafetyMoveSelected />
+      </Provider>,
+    );
+
+    expect(screen.getByLabelText('Orders type')).toBeDisabled();
+  });
+
+  it('disables orders type when bluebark move is selected', async () => {
+    render(
+      <Provider store={mockStore.store}>
+        <AddOrdersForm {...testProps} isBluebarkMoveSelected />
+      </Provider>,
+    );
+    expect(screen.getByLabelText('Orders type')).toBeDisabled();
+  });
+});

src/components/Table/TableQueue.jsx

@@ -56,6 +56,7 @@ const TableQueue = ({
   isBulkAssignmentFFEnabled,
   officeUser,
   activeRole,
+  bulkAssignmentData,
 }) => {
   const [isPageReload, setIsPageReload] = useState(true);
   useEffect(() => {
@@ -204,7 +205,6 @@ const TableQueue = ({
 
   if (isLoading || (title === 'Move history' && data.length <= 0 && !isError)) return <LoadingPlaceholder />;
   if (isError) return <SomethingWentWrong />;
-
   const isDateFilterValue = (value) => {
     return !Number.isNaN(Date.parse(value));
   };
@@ -320,7 +320,11 @@ const TableQueue = ({
     <div className={styles.tabContent}>
       <div className={styles.container}>
         {isBulkAssignModalVisible && (
-          <BulkAssignmentModal isOpen={isBulkAssignModalVisible} onClose={handleCloseBulkAssignModal} />
+          <BulkAssignmentModal
+            isOpen={isBulkAssignModalVisible}
+            onClose={handleCloseBulkAssignModal}
+            bulkAssignmentData={bulkAssignmentData || {}}
+          />
         )}
         <GridContainer data-testid="table-queue" containerSize="widescreen" className={styles.TableQueue}>
           <div className={styles.queueHeader}>