code-dot-org · breville · May 8, 2020 · May 5, 2020 · May 6, 2020 · May 7, 2020
diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
@@ -708,6 +708,7 @@
  "enrollmentDescription": "Join your teacher's classroom by entering their section code below. Teachers will be able to see your course progress, projects, and reset your password in case you forget it.",
  "errorEmptyFunctionBlockModal": "There need to be blocks inside your function definition. Click \"edit\" and drag blocks inside the green block.",
  "errorExceededLimitedBlocks": "You did it! Now go find the pattern in your code and take out the extra blocks. You can only use {limit} of these blocks:",
+  "errorFindingClassLibraries": "Unable to load your class libraries at this time. Please check your internet connection and try again.",
  "errorIncompleteBlockInFunction": "Click \"edit\" to make sure you don't have any blocks missing inside your function definition.",
  "errorGenericLintError": "Your program contains an editor warning that needs to be corrected. Hover over the icons near the line numbers in the editor to learn more.",
  "errorLoadingRosteredSections": "Oops, there was a problem grabbing your sections from {type}.",

diff --git a/apps/src/applab/designElements/ThemeDropdown.jsx b/apps/src/applab/designElements/ThemeDropdown.jsx
@@ -2,7 +2,7 @@
 // each theme will look like
 import PropTypes from 'prop-types';
 import React from 'react';
-import {themeOptionsForSelect} from '../constants';
+import {themeOptionsForSelect, DEFAULT_THEME_INDEX} from '../constants';
 import Select from 'react-select';
 import 'react-select/dist/react-select.css';

@@ -39,9 +39,14 @@ export default class ThemeDropdown extends React.Component {
  state = {
    selectedValue: this.props.initialValue
  };
+
  handleChange = event => {
-    this.props.handleChange(event.value);
-    this.setState({selectedValue: event.value});
+    const newValue = event
+      ? event.value
+      : themeOptionsForSelect[DEFAULT_THEME_INDEX].option;
+
+    this.props.handleChange(newValue);
+    this.setState({selectedValue: newValue});
  };

  render() {

diff --git a/apps/src/code-studio/components/libraries/LibraryManagerDialog.jsx b/apps/src/code-studio/components/libraries/LibraryManagerDialog.jsx
@@ -115,7 +115,7 @@ export class LibraryManagerDialog extends React.Component {
    displayLibrary: null,
    displayLibraryMode: DisplayLibraryMode.NONE,
    isLoading: false,
-    error: null,
+    errorMessages: {},
    updatedLibraryChannels: []
  };

@@ -139,7 +139,12 @@ export class LibraryManagerDialog extends React.Component {
        this.setState({classLibraries, projectLibraries});
      },
      error => {
-        console.log('error: ' + error);
+        this.setState({
+          errorMessages: {
+            ...this.state.errorMessages,
+            loadClassLibraries: i18n.errorFindingClassLibraries()
+          }
+        });
      }
    );

@@ -163,7 +168,10 @@ export class LibraryManagerDialog extends React.Component {
  };

  setLibraryToImport = event => {
-    this.setState({importLibraryId: event.target.value, error: null});
+    this.setState({
+      importLibraryId: event.target.value,
+      errorMessages: {...this.state.errorMessages, importFromId: undefined}
+    });
  };

  addLibraryToProject = libraryJson => {
@@ -194,7 +202,10 @@ export class LibraryManagerDialog extends React.Component {
  addLibraryById = (libraryJson, error) => {
    if (error) {
      this.setState({
-        error: i18n.libraryImportError(),
+        errorMessages: {
+          ...this.state.errorMessages,
+          importFromId: i18n.libraryImportError()
+        },
        isLoading: false
      });
    } else if (libraryJson) {
@@ -278,7 +289,10 @@ export class LibraryManagerDialog extends React.Component {
  };

  displayClassLibraries = () => {
-    const {classLibraries} = this.state;
+    const {classLibraries, errorMessages} = this.state;
+    if (errorMessages.loadClassLibraries) {
+      return <div style={styles.error}>{errorMessages.loadClassLibraries}</div>;
+    }
    if (!Array.isArray(classLibraries) || !classLibraries.length) {
      return <div style={styles.message}>{i18n.noLibrariesInClass()}</div>;
    }
@@ -367,7 +381,12 @@ export class LibraryManagerDialog extends React.Component {

  render() {
    const {isOpen} = this.props;
-    const {importLibraryId, displayLibrary, isLoading, error} = this.state;
+    const {
+      importLibraryId,
+      displayLibrary,
+      isLoading,
+      errorMessages
+    } = this.state;

    if (!isOpen) {
      return null;
@@ -406,7 +425,7 @@ export class LibraryManagerDialog extends React.Component {
              {!isLoading && i18n.add()}
            </button>
          </div>
-          <div style={styles.error}>{error}</div>
+          <div style={styles.error}>{errorMessages.importFromId}</div>
        </BaseDialog>
        {displayLibrary && this.renderDisplayLibrary()}
      </div>

diff --git a/apps/src/code-studio/pd/workshop_dashboard/components/workshop_form.jsx b/apps/src/code-studio/pd/workshop_dashboard/components/workshop_form.jsx
@@ -42,6 +42,8 @@ import {
  Courses,
  Subjects
 } from '@cdo/apps/generated/pd/sharedWorkshopConstants';
+import HelpTip from '@cdo/apps/lib/ui/HelpTip';
+import experiments from '@cdo/apps/util/experiments';

 const styles = {
  readOnlyInput: {
@@ -90,6 +92,8 @@ export class WorkshopForm extends React.Component {
      enrolled_teacher_count: PropTypes.number.isRequired,
      regional_partner_name: PropTypes.string,
      regional_partner_id: PropTypes.number,
+      virtual: PropTypes.bool,
+      suppress_email: PropTypes.bool,
      organizer: PropTypes.shape({
        id: PropTypes.number,
        name: PropTypes.string
@@ -126,7 +130,9 @@ export class WorkshopForm extends React.Component {
      availableFacilitators: [],
      showSaveConfirmation: false,
      showTypeOptionsHelpDisplay: false,
-      regional_partner_id: ''
+      regional_partner_id: '',
+      virtual: false,
+      suppress_email: false
    };

    if (props.workshop) {
@@ -145,7 +151,9 @@ export class WorkshopForm extends React.Component {
          'fee',
          'notes',
          'regional_partner_id',
-          'organizer'
+          'organizer',
+          'virtual',
+          'suppress_email'
        ])
      );
      initialState.sessions = this.prepareSessionsForForm(
@@ -724,6 +732,22 @@ export class WorkshopForm extends React.Component {
    return value;
  };

+  handleVirtualChange = event => {
+    // This field gets its own handler both so we can coerce its value to
+    // boolean, and so we can enforce some business logic that says:
+    // Virtual workshops ALWAYS suppress email.
+    const virtual = event.target.value === 'true';
+    const suppress_email = virtual || this.state.suppress_email;
+    this.setState({virtual, suppress_email});
+  };
+
+  handleSuppressEmailChange = event => {
+    // This field gets its own handler so we can coerce its value to boolean
+    // before we save it to React state.
+    const suppress_email = event.target.value === 'true';
+    this.setState({suppress_email});
+  };
+
  handleRegionalPartnerSelect = selection => {
    this.setState({regional_partner_id: selection ? selection.value : null});
  };
@@ -781,6 +805,8 @@ export class WorkshopForm extends React.Component {
      subject: this.state.subject,
      fee: this.state.fee ? this.state.fee : null,
      notes: this.state.notes,
+      virtual: this.state.virtual,
+      suppress_email: this.state.suppress_email,
      sessions_attributes: this.prepareSessionsForApi(
        this.state.sessions,
        this.state.destroyedSessions
@@ -965,6 +991,69 @@ export class WorkshopForm extends React.Component {
            readOnly={this.props.readOnly}
          />
          <br />
+          {experiments.isEnabled(experiments.VIRTUAL_WORKSHOPS) && (
+            <Row>
+              <Col sm={5}>
+                <FormGroup validationState={validation.style.virtual}>
+                  <ControlLabel>
+                    Is this a virtual workshop?
+                    <HelpTip>
+                      <p>When a workshop is virtual, our system:</p>
+                      <ul>
+                        <li>
+                          Does not require you to enter a location address
+                        </li>
+                        <li>
+                          Will not send email notifications, such as enrollment
+                          receipts and workshop reminders
+                        </li>
+                        <li>
+                          Will send a post-workshop survey designed for virtual
+                          workshops
+                        </li>
+                      </ul>
+                    </HelpTip>
+                  </ControlLabel>
+                  <SelectIsVirtual
+                    value={this.state.virtual || false}
+                    onChange={this.handleVirtualChange}
+                    readOnly={this.props.readOnly}
+                  />
+                  <HelpBlock>{validation.help.virtual}</HelpBlock>
+                </FormGroup>
+              </Col>
+              <Col sm={5}>
+                <FormGroup validationState={validation.style.suppress_email}>
+                  <ControlLabel>
+                    Enable email notifications?
+                    <HelpTip>
+                      <p>
+                        Code.org can send email notifications about this
+                        workshop to your attendees on your behalf. Notifications
+                        may include:
+                      </p>
+                      <ul>
+                        <li>Enrollment receipts</li>
+                        <li>10-day and 3-day workshop reminders</li>
+                        <li>Updates when workshop details change</li>
+                      </ul>
+                      <p>
+                        Code.org will always email a post-workshop survey to
+                        participants, even if you disable workshop notifications
+                        here.
+                      </p>
+                    </HelpTip>
+                  </ControlLabel>
+                  <SelectSuppressEmail
+                    onChange={this.handleSuppressEmailChange}
+                    value={this.state.suppress_email || false}
+                    readOnly={this.props.readOnly || this.state.virtual}
+                  />
+                  <HelpBlock>{validation.help.suppress_email}</HelpBlock>
+                </FormGroup>
+              </Col>
+            </Row>
+          )}
          <Row>
            <Col sm={4}>
              <FormGroup validationState={validation.style.location_name}>
@@ -1085,3 +1174,51 @@ export default connect(state => ({
  permission: state.workshopDashboard.permission,
  facilitatorCourses: state.workshopDashboard.facilitatorCourses
 }))(WorkshopForm);
+
+const SelectIsVirtual = ({value, readOnly, onChange}) => (
+  <FormControl
+    componentClass="select"
+    value={value}
+    id="virtual"
+    name="virtual"
+    onChange={onChange}
+    style={readOnly ? styles.readOnlyInput : undefined}
+    disabled={readOnly}
+  >
+    <option key={false} value={false}>
+      No, this is an in-person workshop.
+    </option>
+    <option key={true} value={true}>
+      Yes, this is a virtual workshop.
+    </option>
+  </FormControl>
+);
+SelectIsVirtual.propTypes = {
+  value: PropTypes.bool.isRequired,
+  readOnly: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+};
+
+const SelectSuppressEmail = ({value, readOnly, onChange}) => (
+  <FormControl
+    componentClass="select"
+    value={value}
+    id="suppress_email"
+    name="suppress_email"
+    onChange={onChange}
+    style={readOnly ? styles.readOnlyInput : undefined}
+    disabled={readOnly}
+  >
+    <option key={false} value={false}>
+      Yes, send notifications on my behalf.
+    </option>
+    <option key={true} value={true}>
+      No, I will handle communication with attendees myself.
+    </option>
+  </FormControl>
+);
+SelectSuppressEmail.propTypes = {
+  value: PropTypes.bool.isRequired,
+  readOnly: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+};
diff --git a/apps/src/code-studio/pd/workshop_dashboard/workshop.jsx b/apps/src/code-studio/pd/workshop_dashboard/workshop.jsx
@@ -101,7 +101,9 @@ export class Workshop extends React.Component {
            'regional_partner_id',
            'scholarship_workshop?',
            'potential_organizers',
-            'created_at'
+            'created_at',
+            'virtual',
+            'suppress_email'
          ])
        });
      })

diff --git a/apps/src/lib/ui/HelpTip.jsx b/apps/src/lib/ui/HelpTip.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import Portal from 'react-portal';
+import FontAwesome from '../../templates/FontAwesome';
+import _ from 'lodash';
+
+export default function HelpTip({children}) {
+  const id = _.uniqueId();
+
+  return (
+    <span data-for={id} data-tip>
+      <FontAwesome
+        icon="question-circle-o"
+        style={{cursor: 'pointer', marginLeft: '0.5em', marginRight: '0.5em'}}
+      />
+      <Portal isOpened={true}>
+        <ReactTooltip id={id} role="tooltip" effect="solid">
+          <div style={{maxWidth: 400}}>{children}</div>
+        </ReactTooltip>
+      </Portal>
+    </span>
+  );
+}
+HelpTip.propTypes = {
+  children: PropTypes.node.isRequired
+};