[jjhampton]

Description of changes

Re-added form to make Mentor Service Requests from the React front-end -> Rails back-end (which then forwards the requests -> Airtable). Intended to replace the Airtable form currently at https://airtable.com/tbl9uQEE8VeMdNCey/viwILQ8iI5D7vzYpghttps://airtable.com/shrPzqty0aXtfWuuq .

Note: If any OC maintainers want to manually test this branch end-to-end n their dev machines (verifying that requests make it all the way from React FE all the way to Airtable, and also populate to the Slack #mentors-internal channel via the bot), please DM me on Slack first.

Desktop screenshot:

Mobile screenshot:

Issue Resolved

#971

Reminder - once this is merged, before closing out the issue, we still need to point https://op.co.de/mentor-request to the new URL: https://operationcode.org/mentor-request. Please ping @ hollomancer when that happens. (done)

[kylemh]

Let's sit down some time this weekend and test together?

[apex-omontgomery]

Let me know if you want me to pipe these tests ones to a different channel.

[aaron-junot]

The code looks clean to me, I would love to see a demo though. If you guys get together this weekend, I'd like to be a part of that and actually see it in action.

[jjhampton]

@kylemh Want to test out this PR out Sunday? There's a project-lead meeting in the afternoon. We can do before or after that.

[kylemh]

Sunday after the meeting. 👍🏽

[jjhampton]

@aaron-suarez If you want to demo/participate in testing, we'll do this at ~ 12pm Pacific / 3pm Pacific.
@wimo7083 Sending test requests to another channel will be helpful, let's figure that out on Slack beforehand. 👍

[aaron-junot]

I'll join in if I'm available, I may or may not be.

[jjhampton]

@kylemh @dmarchante I've made a few changes in response to your feedback:

• Switched the 'Additional Details' field to textarea
• Doubled the vertical padding around the Section that serves as the outer wrapper element for the MentorRequest component
• Removed displaying of errors if required fields aren't entered. Instead, the submit button will be disabled & colored grey, unless all required fields are entered (they are marked with the sublabel 'Required'). Once all required fields are entered (and the military affiliation checkbox is checked), the submit button will be enabled, and colored OC blue
• Re-added the error that displays if the form submit fails for some reason (will be displayed below the button)

Did another test, and the requests are correctly populating to Airtable and also posting in the Slack channel via PyBack bot.

[kylemh]

did this affect the multi-select on /code_schools?

[jjhampton]

It shouldn't have, since that one's a multi-select, that should use the class .Select--multi. I basically had to add that rule here so that single-select React-select components get the correct styling. As far as I know we're only using single-select React-select instances on this new Mentor Request form.

I'll double check before merging tho.

[jjhampton]

Just checked, it's good to go in the /code-schools page. The new CSS rule doesn't target it.

[kylemh]

thanks for removing ☠️ code

[AshTemp]

Um guys, not to rain all over your parade, but the new form still uses AirTable....

[jjhampton]

The new React form within the OC webapp only interfaces with the OC back-end, not with AirTable.

The old form (the Airtable form hosted on Airtable's servers) interfaced directly with Airtable, which was what the issue was supposed to be changing - removing that form and using the React form instead.

[apex-omontgomery]

So FE -(data)--> BE --(data)--> database; BE --(data)-->airtable;

Zapier then waits for airtable, and sends an event to pybot?

[AshTemp]

John learned me a thing. :) I'm going away now.

[jjhampton]

@wimo7083 That looks about right to me .... But I don't think that the BE database involved in the flow at this moment.

FE -(data)--> BE --(data)--> airtable;
Zapier then waits for airtable, and sends an event to pybot, which does some more communication with Airtable and then forwards that data to Slack in the form of a channel post? (I'm sure I'm doing some hand-waving with the last part)