Merge pull request #19266 from department-of-veterans-affairs/b_reed/…

…APPEALS-28105

Webex Mock Service APPEALS-28105

.gitignore

@@ -26,6 +26,7 @@ client/junit.xml
 !/reports/sql_queries
 !/reports/.keep
 credstash.log
+client/mocks/webex-mocks/webex-mock.json
 # Ignore MS Office temp files
 ~$*
 

client/app/queue/OrganizationUsers.jsx

@@ -253,37 +253,52 @@ export default class OrganizationUsers extends React.PureComponent {
     const listOfUsers = this.state.organizationUsers.map((user, i) => {
       const { dvc, admin } = user.attributes;
       const style = i === 0 ? topUserStyle : userStyle;
-
-      return <React.Fragment key={user.id}>
-        <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 {...buttonContainerStyle}>
-                <div>
-                  {(judgeTeam || dvcTeam) ? '' : this.adminButton(user, admin)}
-                  {this.removeUserButton(user)}
-                </div>
-                {this.state.organizationName === 'Hearings Management' &&
-                  <div {...radioContainerStyle}>
-                    <SelectConferenceTypeRadioField
-                      key={`${user.id}-conference-selection`}
-                      name={user.id}
-                      meetingType={user.attributes.meeting_type}
-                      organization={this.props.organization}
-                      user={user} />
+      const { conferenceSelectionVisibility } = this.props;
+
+      return (
+        <React.Fragment key={user.id}>
+          <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 {...buttonContainerStyle}>
+                  <div>
+                    {judgeTeam || dvcTeam ? '' : this.adminButton(user, admin)}
+                    {this.removeUserButton(user)}
                   </div>
-                }
-              </div>}
-          </ul>
-        </div>
-      </React.Fragment>;
+                  {this.state.organizationName === 'Hearings Management' &&
+                    !conferenceSelectionVisibility && (
+                    <div
+                      {...radioContainerStyle}
+                    >
+                      <SelectConferenceTypeRadioField
+                        key={`${user.id}-conference-selection`}
+                        name={user.id}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+            </ul>
+          </div>
+        </React.Fragment>
+      );
     });
 
     return <React.Fragment>

client/mocks/webex-mocks/README.md

@@ -0,0 +1,59 @@
+Setup json server
+
+Step 1: Open a terminal
+
+Step 2: Navigate to the caseflow/client
+
+step 3: Run command: [npm install json-server] or [yarn add json-server]
+
+If the [npm install json-server] or [yarn add json-server]  returns an error that resembles:
+
+error standard@17.1.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "15.1.0"
+
+extra steps may need to be taken.
+
+for brevity These instructions will follow the happy path.  While in the client directory in terminal:
+[nodenv install 14.21.2]
+[nodenv local 14.21.2]
+
+If for any reason you want to go back to the original nodenv that was used prior to this change you can run, [nodenv local 12.13.0]
+
+If it all succeeds you can attempt the [npm install json-server] or [yarn add json-server]  once again.
+
+This time with no issue.
+given that the install goes as expected you can continue following the rest of the directions.
+
+If there are still issues in getting this to operate as expected, See your tech lead for asssisstance.
+
+step 4: Make sure casfelow application is running
+
+step 5: Autogenerate test data, run this command: npm run generate-webex(This will also create the json file)
+
+step 6: Run command: npm run webex-server
+
+\*info: You will recieve all available routes within the terminal under 'Resources'
+
+\*info: port must be set on a different port to run due to caseflow running on port 3000
+
+step 7: Open a browser window in chrome and navigate to localhost:3050 [You will get the default page]
+
+\*info: You can use any api endpoint software you want like Postman, but a good lightweight vs code ext. is [Thunder Client]
+
+\*info: reference guides
+[https://github.com/typicode/json-server/blob/master/README.md]
+
+Tutorial Resources:
+[https://www.youtube.com/watch?v=_1kNqAybxW0&list=PLC3y8-rFHvwhc9YZIdqNL5sWeTCGxF4ya&index=1]
+
+To create a meeting the request body must have all of the keys and hit this endpoint?
+[http://localhost:3050/fake.api-usgov.webex.com/v1/meetings]
+
+Get all conferencelinks with this endpoint
+[http://localhost:3050/api/v1/conference-links]
+
+Javascript API call Fetch/Axios examples
+[https://jsonplaceholder.typicode.com/]
+
+
+
+

client/mocks/webex-mocks/meetingData.js

@@ -0,0 +1,37 @@
+const faker = require('faker');
+
+const generateMeetingData = (response) => {
+
+  return {
+    id: faker.random.uuid(),
+    jwt: {
+      sub: response.jwt.sub,
+      Nbf: response.jwt.Nbf,
+      Exp: response.jwt.Exp,
+      flow: {
+        id: faker.random.uuid(),
+        data: [
+          {
+            uri: `${faker.internet.userName()}@intadmin.room.wbx2.com`,
+          },
+          {
+            uri: `${faker.internet.userName()}@intadmin.room.wbx2.com`,
+          },
+        ],
+      },
+    },
+    aud: faker.random.uuid(),
+    numGuest: faker.random.number({ min: 1, max: 10 }),
+    numHost: 1,
+    provideShortUrls: faker.random.boolean(),
+    verticalType: faker.company.catchPhrase(),
+    loginUrlForHost: faker.random.boolean(),
+    jweAlg: 'PBES2-HS512+A256KW',
+    saltLength: faker.random.number({ min: 1, max: 16 }),
+    iterations: faker.random.number({ min: 500, max: 2000 }),
+    enc: 'A256GCM',
+    jwsAlg: 'HS512',
+  };
+};
+
+module.exports = generateMeetingData;

client/mocks/webex-mocks/routes.json

@@ -0,0 +1,4 @@
+{
+    "/api/v1/conference-links": "/conferenceLinks",
+    "/api/v1/conference-links/:id": "/conferenceLinks/:id"
+  }

client/mocks/webex-mocks/webex-mock-generator.js

@@ -0,0 +1,50 @@
+const fs = require('fs');
+const faker = require('faker');
+const generateMeetingData = require('./meetingData.js');
+
+const generateConferenceLinks = () => {
+  let webexLinks = [];
+
+  for (let id = 1; id <= 10; id++) {
+    const startDate = new Date('2021-01-01T00:00:00Z');
+    const endDate = new Date('2023-01-01T00:00:00Z');
+
+    const randomStartDate = faker.date.between(startDate, endDate);
+    const randomEndDate = new Date(randomStartDate.getTime());
+
+    randomEndDate.setHours(randomEndDate.getHours() + 1);
+
+    let startTime = randomStartDate.toISOString().replace('Z', '');
+    let endTime = randomEndDate.toISOString().replace('Z', '');
+
+    let subject = faker.lorem.words();
+
+    let updatedValues = {
+      jwt: {
+        sub: subject,
+        Nbf: startTime,
+        Exp: endTime
+      }
+    };
+
+    webexLinks.push(generateMeetingData(updatedValues));
+  }
+
+  return webexLinks;
+};
+
+// Generate the data
+const data = {
+  conferenceLinks: generateConferenceLinks(),
+  // ... other data models
+};
+
+// Check if the script is being run directly
+if (require.main === module) {
+  fs.writeFileSync(
+    'mocks/webex-mocks/webex-mock.json',
+    JSON.stringify(data, null, 2)
+  );
+  // eslint-disable-next-line no-console
+  console.log("Generated new data in webex-mock.json");
+}