Hbergam/signin callout UI

apps/i18n/common/en_us.json

@@ -1224,6 +1224,8 @@
   "notApplicable": "N/A",
   "notCompleted": "Not completed",
   "notSaved": "Not saved",
+  "notSignedInHeader": "You are not signed in",
+  "notSignedInBody": "You don't need an account to work on this lesson, but if you want to save your work, remember to sign in or create an account before you get started.",
   "notStarted": "Not started",
   "nPoints": "{numPoints, plural, one {1 point} other {# points}}",
   "numMatchCorrect": "# match correct",

apps/src/code-studio/components/header/SignInCallout.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import i18n from '@cdo/locale';
+import PropTypes from 'prop-types';
+
+const CALLOUT_COLOR = '#454545';
+const TRIANGLE_BASE = 30;
+const TRIANGLE_HEIGHT = 15;
+const CALLOUT_Z_INDEX = 1040;
+const CALLOUT_TOP = 30;
+
+const styles = {
+  container: {
+    // The outermost div is relatively positioned so it can be used as a positional
+    // anchor for its children (which will be absolutely positioned to avoid affecting
+    // layout).  This element must be 0-sized to avoid affecting layout.
+    position: 'relative',
+    height: 0,
+    width: 0
+  },
+  content: {
+    position: 'absolute',
+    top: CALLOUT_TOP,
+    right: -90,
+    zIndex: CALLOUT_Z_INDEX,
+    backgroundColor: CALLOUT_COLOR,
+    borderRadius: 3
+  },
+  modalBackdrop: {
+    // Most backdrop attributes come from the 'modal-backdrop' class defined by bootstrap
+    // but we need to override the opacity as the default opacity of 0.8 is too dark.
+    // Note that bootstrap defaults the z-index of the backdrop to 1040.
+    opacity: 0.5
+  },
+  upTriangle: {
+    position: 'absolute',
+    top: CALLOUT_TOP - TRIANGLE_HEIGHT,
+    left: -(TRIANGLE_HEIGHT / 2.0),
+    width: 0,
+    height: 0,
+    borderStyle: 'solid',
+    borderTopWidth: 0,
+    borderRightWidth: TRIANGLE_BASE,
+    borderBottomWidth: TRIANGLE_HEIGHT,
+    borderLeftWidth: TRIANGLE_BASE,
+    borderTopColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: CALLOUT_COLOR,
+    borderLeftColor: 'transparent',
+    zIndex: CALLOUT_Z_INDEX
+  },
+  contentContainer: {
+    display: 'flex',
+    padding: 20
+  },
+  imageContainer: {
+    width: 100,
+    marginRight: 20
+  },
+  textContainer: {
+    width: 400,
+    textAlign: 'left',
+    whiteSpace: 'normal'
+  },
+  textHeader: {
+    marginTop: 0
+  }
+};
+
+/*
+ * This is a callout attached to the sign-in button that's used on CSF level
+ * pages to remind the user to sign-in.  Note that the sign-in button is
+ * defined in shared/haml/user_header.haml and is not a React component.
+ * This component is injected into the page by src/code-studio/header.js.
+ */
+export default class SignInCallout extends React.Component {
+  static propTypes = {
+    handleClose: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.getContent = this.getContent.bind(this);
+  }
+
+  getContent() {
+    return (
+      <div style={styles.contentContainer}>
+        <img
+          style={styles.imageContainer}
+          src="/shared/images/user-not-signed-in.png"
+        />
+        <div style={styles.textContainer}>
+          <h2 style={styles.textHeader}>{i18n.notSignedInHeader()}</h2>
+          <p> {i18n.notSignedInBody()}</p>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div style={styles.container}>
+        <div
+          className="modal-backdrop"
+          style={styles.modalBackdrop}
+          onClick={this.props.handleClose}
+        />
+        <div style={styles.upTriangle} />
+        <div style={styles.content}>{this.getContent()}</div>
+      </div>
+    );
+  }
+}

apps/src/code-studio/components/header/SignInCalloutLogic.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import cookies from 'js-cookie';
+import SignInCallout from './SignInCallout';
+
+const HideSignInCallout = 'hide_signin_callout';
+
+// The use of both session storage and cookies is to check for 1 day
+// and 1 session, and display the callout again only once BOTH have passed.
+export default class SignInCalloutLogic extends React.Component {
+  constructor(props) {
+    super(props);
+    this.closeCallout = this.closeCallout.bind(this);
+    this.state = {
+      showCallout: !(
+        cookies.get(HideSignInCallout) === 'true' ||
+        sessionStorage.getItem(HideSignInCallout) === 'true'
+      )
+    };
+  }
+
+  closeCallout(event) {
+    this.setState({showCallout: false});
+    cookies.set(HideSignInCallout, 'true', {expires: 1, path: '/'});
+    sessionStorage.setItem(HideSignInCallout, 'true');
+    event.preventDefault();
+  }
+
+  // For readibility: returning an empty div here explicitly if the callout is
+  // not supposed to be displayed. This avoids using a render statement that
+  // often returns *nothing.
+  render() {
+    if (this.state.showCallout) {
+      return (
+        <div className="uitest-signincallout">
+          <SignInCallout handleClose={this.closeCallout} />
+        </div>
+      );
+    } else {
+      return <div />;
+    }
+  }
+}

apps/test/unit/code-studio/components/header/SignInCalloutTest.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import SignInCalloutLogic from '@cdo/apps/code-studio/components/header/SignInCalloutLogic';
+import {shallow} from 'enzyme';
+import {expect} from '../../../../util/reconfiguredChai';
+import i18n from '@cdo/locale';
+
+const wrapper = shallow(<SignInCalloutLogic />);
+
+describe('ViewPopup', () => {
+  it('displays the correct background darkness', () => {
+    wrapper.setState({showCallout: true});
+    expect(wrapper.html().includes('opacity:0.5')).to.be.true;
+  });
+
+  it('shows the correct header', () => {
+    expect(wrapper.html().includes(i18n.notSignedInHeader())).to.be.true;
+  });
+
+  it('shows the correct image', () => {
+    expect(wrapper.html().includes('user-not-signed-in.png')).to.be.true;
+  });
+});