B 21336 int Add bulk assignment button and modal creation

.circleci/config.yml

@@ -900,6 +900,7 @@ commands:
             export FEATURE_FLAG_ENABLE_ALASKA=false
             export FEATURE_FLAG_UNACCOMPANIED_BAGGAGE=false
             export FEATURE_FLAG_ENABLE_HAWAII=false
+            export FEATURE_FLAG_BULK_ASSIGNMENT=true
 
             # disable for speed, playwright tests can fail otherwise
             export DB_DEBUG=false
@@ -943,6 +944,7 @@ commands:
             FEATURE_FLAG_QUEUE_MANAGEMENT: 'false'
             FEATURE_FLAG_UNACCOMPANIED_BAGGAGE: 'false'
             FEATURE_FLAG_ENABLE_ALASKA: 'false'
+            FEATURE_FLAG_BULK_ASSIGNMENT: 'true'
           command: |
             SHARD=$((${CIRCLE_NODE_INDEX}+1))
             PLAYWRIGHT_JUNIT_OUTPUT_NAME=playwright-results.xml \

.envrc

@@ -156,6 +156,9 @@ export FEATURE_FLAG_BOAT=true
 export FEATURE_FLAG_MOBILE_HOME=true
 export FEATURE_FLAG_UNACCOMPANIED_BAGGAGE=false
 
+# Feature flag to allow Bulk Assigment options to be displayed
+export FEATURE_FLAG_BULK_ASSIGNMENT=true
+
 # Feature flag to allow AK to be entered as a state
 export FEATURE_FLAG_ENABLE_ALASKA=true
 

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

@@ -49,4 +49,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

config/env/demo.app.env

@@ -54,4 +54,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

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

@@ -49,4 +49,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

config/env/exp.app.env

@@ -54,4 +54,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

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

@@ -47,4 +47,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

config/env/loadtest.app.env

@@ -52,4 +52,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

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

@@ -46,4 +46,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

config/env/prd.app.env

@@ -53,4 +53,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

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

@@ -48,4 +48,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

config/env/stg.app.env

@@ -54,4 +54,5 @@ FEATURE_FLAG_THIRD_ADDRESS_AVAILABLE=false
 FEATURE_FLAG_QUEUE_MANAGEMENT=false
 FEATURE_FLAG_DODID_UNIQUE=false
 FEATURE_FLAG_ENABLE_ALASKA=false
-FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_ENABLE_HAWAII=false
+FEATURE_FLAG_BULK_ASSIGNMENT=true

config/flipt/storage/development.features.yaml

@@ -137,6 +137,14 @@ flags:
       - segment:
           key: mil-app
           value: true
+  - key: bulk_assignment
+    name: bulk assignment feature flag
+    type: BOOLEAN_FLAG_TYPE
+    enabled: true
+    rollouts:
+      - segment:
+          key: mil-app
+          value: true
   - key: dodid_unique
     name: DODID validation feature flag that ensures unique DODIDs
     type: BOOLEAN_FLAG_TYPE

src/components/BulkAssignment/BulkAssignmentModal.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@trussworks/react-uswds';
+
+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>
+);
+
+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',
+};
+
+BulkAssignmentModal.displayName = 'BulkAssignmentModal';
+
+export default connectModal(BulkAssignmentModal);

src/components/BulkAssignment/BulkAssignmentModal.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import BulkAssignmentModal from './BulkAssignmentModal';
+
+export default {
+  title: 'Components/BulkAssignmentModal',
+  component: BulkAssignmentModal,
+  argTypes: {
+    onClose: { action: 'close button clicked' },
+    onSubmit: { action: 'submit button clicked' },
+  },
+};
+
+const ConnectedTemplate = (args) => <BulkAssignmentModal {...args} />;
+export const ConnectedModal = ConnectedTemplate.bind({});
+ConnectedModal.args = {
+  isOpen: true,
+};

src/components/BulkAssignment/BulkAssignmentModal.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { BulkAssignmentModal } from 'components/BulkAssignment/BulkAssignmentModal';
+
+let onClose;
+let onSubmit;
+beforeEach(() => {
+  onClose = jest.fn();
+  onSubmit = jest.fn();
+});
+
+describe('BulkAssignmentModal', () => {
+  it('renders the component', async () => {
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+
+    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} />);
+
+    const closeButton = await screen.findByTestId('modalCloseButton');
+
+    await userEvent.click(closeButton);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('closes the modal when the Cancel button is clicked', async () => {
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+
+    const cancelButton = await screen.findByRole('button', { name: 'Cancel' });
+
+    await userEvent.click(cancelButton);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the submit function when Save button is clicked', async () => {
+    render(<BulkAssignmentModal onSubmit={onSubmit} onClose={onClose} />);
+
+    const saveButton = await screen.findByRole('button', { name: 'Save' });
+
+    await userEvent.click(saveButton);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});