lthompson/APPEALS-26633

app/controllers/organizations/users_controller.rb

@@ -32,6 +32,7 @@ def update
       adjust_admin_rights
     end
 
+    update_user_meeting_type
     render json: { users: json_administered_users([user_to_modify]) }, status: :ok
   end
 
@@ -67,6 +68,14 @@ def adjust_admin_rights
     end
   end
 
+  def update_user_meeting_type
+    new_meeting_type = params.dig(:attributes, :meeting_type)
+
+    if organization["url"] == HearingAdmin.singleton.url && new_meeting_type
+      OrganizationsUser.update_user_conference_type(user_to_modify, new_meeting_type)
+    end
+  end
+
   def organization_url
     params[:organization_url]
   end

app/models/organizations_user.rb

@@ -28,6 +28,12 @@ def remove_admin_rights_from_user(user, organization)
       existing_record(user, organization)&.update!(admin: false)
     end
 
+    def update_user_conference_type(user, new_meeting_type)
+      if user.meeting_type
+        user.update!(meeting_type: new_meeting_type)
+      end
+    end
+
     def remove_user_from_organization(user, organization)
       if user_is_judge_of_team?(user, organization)
         fail Caseflow::Error::ActionForbiddenError, message: COPY::JUDGE_TEAM_REMOVE_JUDGE_ERROR

app/models/serializers/work_queue/administered_user_serializer.rb

@@ -11,4 +11,5 @@ class WorkQueue::AdministeredUserSerializer < WorkQueue::UserSerializer
       params[:organization].dvc&.eql?(object)
     end
   end
+  attribute :meeting_type
 end

client/COPY.json

@@ -772,6 +772,7 @@
   "USER_MANAGEMENT_GIVE_USER_ADMIN_RIGHTS_BUTTON_TEXT": "Add admin rights",
   "USER_MANAGEMENT_REMOVE_USER_ADMIN_RIGHTS_BUTTON_TEXT": "Remove admin rights",
   "USER_MANAGEMENT_REMOVE_USER_FROM_ORG_BUTTON_TEXT": "Remove from team",
+  "USER_MANAGEMENT_SELECT_HEARINGS_CONFERENCE_TYPE": "Schedule hearings using:",
   "MEMBERSHIP_REQUEST_ACTION_SUCCESS_TITLE": "You successfully %s %s's request",
   "MEMBERSHIP_REQUEST_ACTION_SUCCESS_MESSAGE": "The user was %s regular member access to %s.",
   "VHA_MEMBERSHIP_REQUEST_AUTOMATIC_VHA_ACCESS_NOTE": "Note: If you are requesting specialized access and are not a member of the general VHA group, you will automatically be given access to the general VHA group if your request is approved.",

client/app/queue/OrganizationUsers.jsx

@@ -16,6 +16,7 @@ import { LOGO_COLORS } from '../constants/AppConstants';
 import COPY from '../../COPY';
 import LoadingDataDisplay from '../components/LoadingDataDisplay';
 import MembershipRequestTable from './MembershipRequestTable';
+import SelectConferenceTypeRadioField from './SelectConferenceTypeRadioField';
 
 const userStyle = css({
   margin: '.5rem 0 .5rem',
@@ -38,11 +39,17 @@ const buttonStyle = css({
 const buttonContainerStyle = css({
   borderBottom: '1rem solid gray',
   borderWidth: '1px',
-  padding: '.5rem 0 2rem',
+  padding: '.5rem 7rem 2rem 0',
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexWrap: 'wrap'
 });
 const listStyle = css({
   listStyle: 'none'
 });
+const radioContainerStyle = css({
+  padding: '-5rem 5rem 2rem 2rem',
+});
 
 export default class OrganizationUsers extends React.PureComponent {
   constructor(props) {
@@ -248,18 +255,34 @@ export default class OrganizationUsers extends React.PureComponent {
       const style = i === 0 ? topUserStyle : userStyle;
 
       return <React.Fragment key={user.id}>
-        <li key={user.id} {...style}>{this.formatName(user)}
-          { judgeTeam && admin && <strong> ( {COPY.USER_MANAGEMENT_JUDGE_LABEL} )</strong> }
-          { dvcTeam && dvc && <strong> ( {COPY.USER_MANAGEMENT_DVC_LABEL} )</strong> }
-          { judgeTeam && !admin && <strong> ( {COPY.USER_MANAGEMENT_ATTORNEY_LABEL} )</strong> }
-          { (judgeTeam || dvcTeam) && admin && <strong> ( {COPY.USER_MANAGEMENT_ADMIN_LABEL} )</strong> }
-        </li>
-        { (judgeTeam || dvcTeam) && admin ?
-          <div {...topUserBorder}></div> :
-          <div {...buttonContainerStyle}>
-            { (judgeTeam || dvcTeam) ? '' : this.adminButton(user, admin) }
-            { this.removeUserButton(user) }
-          </div> }
+        <div>
+          <ul>
+            <li key={user.id} {...style}>{this.formatName(user)}
+              { judgeTeam && admin && <strong> ( {COPY.USER_MANAGEMENT_JUDGE_LABEL} )</strong> }
+              { dvcTeam && dvc && <strong> ( {COPY.USER_MANAGEMENT_DVC_LABEL} )</strong> }
+              { judgeTeam && !admin && <strong> ( {COPY.USER_MANAGEMENT_ATTORNEY_LABEL} )</strong> }
+              { (judgeTeam || dvcTeam) && admin && <strong> ( {COPY.USER_MANAGEMENT_ADMIN_LABEL} )</strong> }
+            </li>
+            { (judgeTeam || dvcTeam) && admin ?
+              <div {...topUserBorder}></div > :
+              <div {...buttonContainerStyle}>
+                <div>
+                  { (judgeTeam || dvcTeam) ? '' : this.adminButton(user, admin) }
+                  { this.removeUserButton(user) }
+                </div>
+                { this.state.organizationName === 'Hearing Admin' &&
+                  <div {...radioContainerStyle}>
+                    <SelectConferenceTypeRadioField
+                      key={`${user.id}-conference-selection`}
+                      name={user.id}
+                      meetingType={user.attributes.meeting_type}
+                      organization={this.props.organization}
+                      user={user} />
+                  </div>
+                }
+              </div> }
+          </ul>
+        </div>
       </React.Fragment>;
     });
 
@@ -285,10 +308,10 @@ export default class OrganizationUsers extends React.PureComponent {
         <div>
           <h2>{COPY.USER_MANAGEMENT_EDIT_USER_IN_ORG_LABEL}</h2>
           <ul {...listStyle}>
-            { (judgeTeam || dvcTeam) ? '' : <li><strong>{COPY.USER_MANAGEMENT_ADMIN_RIGHTS_HEADING}</strong>{COPY.USER_MANAGEMENT_ADMIN_RIGHTS_DESCRIPTION}</li> }
-            <li><strong>{COPY.USER_MANAGEMENT_REMOVE_USER_HEADING}</strong>{ judgeTeam ?
+            { (judgeTeam || dvcTeam) ? '' : <ul><li><strong>{COPY.USER_MANAGEMENT_ADMIN_RIGHTS_HEADING}</strong>{COPY.USER_MANAGEMENT_ADMIN_RIGHTS_DESCRIPTION}</li></ul> }
+            <ul><li><strong>{COPY.USER_MANAGEMENT_REMOVE_USER_HEADING}</strong>{ judgeTeam ?
               COPY.USER_MANAGEMENT_JUDGE_TEAM_REMOVE_USER_DESCRIPTION :
-              COPY.USER_MANAGEMENT_REMOVE_USER_DESCRIPTION }</li>
+              COPY.USER_MANAGEMENT_REMOVE_USER_DESCRIPTION }</li></ul>
           </ul>
         </div>
         <ul>{listOfUsers}</ul>

client/app/queue/SelectConferenceTypeRadioField.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ApiUtil from '../util/ApiUtil';
+
+import RadioField from '../components/RadioField';
+import COPY from '../../COPY';
+
+const radioOptions = [
+  { displayText: 'Pexip',
+    value: 'pexip' },
+  { displayText: 'Webex',
+    value: 'webex' }
+];
+
+const SelectConferenceTypeRadioField = ({ name, meetingType, organization, user }) => {
+  const [value, setValue] = useState(meetingType);
+
+  const modifyConferenceType = (newMeetingType) => {
+    const payload = { data: { ...user, attributes: { ...user.attributes, meeting_type: newMeetingType } } };
+
+    ApiUtil.patch(`/organizations/${organization}/users/${user.id}`, payload);
+  };
+
+  return (
+    <>
+      <RadioField
+        label={COPY.USER_MANAGEMENT_SELECT_HEARINGS_CONFERENCE_TYPE}
+        name={name}
+        options={radioOptions}
+        value={value}
+        onChange={((newValue) => setValue(newValue) || modifyConferenceType(newValue))}
+        vertical
+      /></>
+  );
+};
+
+SelectConferenceTypeRadioField.propTypes = {
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  meetingType: PropTypes.string,
+  organization: PropTypes.string,
+  user: PropTypes.shape({
+    id: PropTypes.string,
+    attributes: PropTypes.object
+  })
+};
+
+export default SelectConferenceTypeRadioField;

client/test/app/queue/SelectConferenceTypeRadioField.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ApiUtil from 'app/util/ApiUtil';
+
+import SelectConferenceTypeRadioField from 'app/queue/SelectConferenceTypeRadioField';
+
+const createSpy = () => jest.spyOn(ApiUtil, 'patch').
+  mockImplementation(() => jest.fn(() => Promise.resolve(
+    {
+      body: { }
+    }
+  )));
+
+const defaults = {
+  name: 'field1',
+  value: '1',
+  options: [
+    { displayText: 'Pexip',
+      value: 'pexip' },
+    { displayText: 'Webex',
+      value: 'webex' },
+  ],
+};
+
+describe('SelectConferenceTypeRadioField', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const setupComponent = (props = {
+    user: {
+      attributes: {
+        id: 1
+      }
+    },
+    meetingType: 'pexip',
+    organization: 'my org'
+  }) => {
+    const utils = render(
+      <SelectConferenceTypeRadioField
+        name={defaults.name}
+        options={defaults.options}
+        {...props}
+      />
+    );
+    const inputs = utils.getAllByRole('radio');
+
+    return {
+      inputs,
+      ...utils,
+    };
+  };
+
+  it('renders correctly', async () => {
+    const { container } = setupComponent();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('changes values by radio button selected', () => {
+    let requestPatchSpy = createSpy();
+
+    setupComponent();
+
+    const webexRadioButton = screen.getByRole('radio', { name: 'Webex' });
+    const pexipRadioButton = screen.getByRole('radio', { name: 'Pexip' });
+
+    expect(webexRadioButton).not.toHaveAttribute('checked', '');
+    expect(pexipRadioButton).toHaveAttribute('checked', '');
+
+    userEvent.click(webexRadioButton);
+
+    expect(requestPatchSpy.mock.calls[0][1].data.attributes.meeting_type).toBe('webex');
+
+    userEvent.click(pexipRadioButton);
+
+    expect(requestPatchSpy.mock.calls[1][1].data.attributes.meeting_type).toBe('pexip');
+  });
+});

client/test/app/queue/__snapshots__/SelectConferenceTypeRadioField.test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectConferenceTypeRadioField renders correctly 1`] = `
+<div>
+  <fieldset
+    class="usa-fieldset-inputs cf-form-radio "
+  >
+    <legend
+      class=""
+    >
+      <span>
+        Schedule hearings using:
+
+      </span>
+    </legend>
+    <div
+      class="cf-form-radio-options"
+    >
+      <div
+        class="cf-form-radio-option"
+      >
+        <input
+          checked=""
+          id="field1_pexip"
+          name="field1"
+          type="radio"
+          value="pexip"
+        />
+        <label
+          class=""
+          for="field1_pexip"
+        >
+          Pexip
+        </label>
+      </div>
+      <div
+        class="cf-form-radio-option"
+      >
+        <input
+          id="field1_webex"
+          name="field1"
+          type="radio"
+          value="webex"
+        />
+        <label
+          class=""
+          for="field1_webex"
+        >
+          Webex
+        </label>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;

db/migrate/20230726201514_add_meeting_type_to_users.rb

@@ -0,0 +1,9 @@
+class AddMeetingTypeToUsers < Caseflow::Migration
+  def up
+    add_column :users, :meeting_type, :varChar, default: "pexip", comment: "Video Conferencing Application Type"
+  end
+
+  def down
+    remove_column :users, :meeting_type
+  end
+end

db/migrate/20230726203030_add_meeting_type_to_virtual_hearings.rb

@@ -0,0 +1,9 @@
+class AddMeetingTypeToVirtualHearings < Caseflow::Migration
+  def up
+    add_column :virtual_hearings, :meeting_type, :varChar, default: "pexip", comment: "Video Conferencing Application Type"
+  end
+
+  def down
+    remove_column :virtual_hearings, :meeting_type
+  end
+end

db/migrate/20230726203750_add_meeting_type_to_conference_links.rb

@@ -0,0 +1,9 @@
+class AddMeetingTypeToConferenceLinks < Caseflow::Migration
+  def up
+    add_column :conference_links, :meeting_type, :varChar, default: "pexip", comment: "Video Conferencing Application Type"
+  end
+
+  def down
+    remove_column :conference_links, :meeting_type
+  end
+end