clicking the cog icon opens a QuickActionsBox to edit all and control…

… project sharing

apps/i18n/common/en_us.json

@@ -173,6 +173,7 @@
   "contractMatchBadName": "Your contract has the wrong name.",
   "contractMatchBadNameCase": "Function names are case-sensitive. Try changing the case of your contract's name.",
   "contractMatchBadRange": "Your contract has the wrong range.",
+  "controlProjectSharing": "Control project sharing",
   "copy": "Copy",
   "copyright": "Copyright",
   "correct": "Correct",
@@ -394,6 +395,7 @@
   "dropletBlock_whileBlock_description": "Creates a loop consisting of a conditional expression and a block of statements executed for each iteration of the loop. The loop continues to execute as long as the condition evaluates to true",
   "dropletBlock_whileBlock_signatureOverride": "while loop",
   "edit": "Edit",
+  "editAll": "Edit all",
   "editSectionDetails": "Edit Section Details",
   "editable": "Editable",
   "eligibilityExplanation": "In order to be eligible to receive a code for a subsidized Circuit Playground kit, you must meet the following requirements:",

apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import QuickActionsCell from "../tables/QuickActionsCell";
+import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu";
+import i18n from '@cdo/locale';
+
+export default class ManageStudentsActionsHeaderCell extends Component {
+
+  render() {
+    return (
+      <div>
+        <QuickActionsCell
+          type="header"
+        >
+          <PopUpMenu.Item
+            onClick={() => console.log('edit all was clicked!')}
+          >
+            {i18n.editAll()}
+          </PopUpMenu.Item>
+          <MenuBreak/>
+          <PopUpMenu.Item
+            onClick={() => console.log('control project sharing was clicked!')}
+          >
+            {i18n.controlProjectSharing()}
+          </PopUpMenu.Item>
+        </QuickActionsCell>
+      </div>
+    );
+  }
+}

apps/src/templates/manageStudents/ManageStudentsTable.jsx

@@ -11,11 +11,15 @@ import ManageStudentsNameCell from './ManageStudentsNameCell';
 import ManageStudentsAgeCell from './ManageStudentsAgeCell';
 import ManageStudentsGenderCell from './ManageStudentsGenderCell';
 import ManageStudentsActionsCell from './ManageStudentsActionsCell';
+import ManageStudentsActionsHeaderCell from './ManageStudentsActionsHeaderCell';
 import {convertStudentDataToArray, AddStatus, RowType, saveAllStudents} from './manageStudentsRedux';
 import { connect } from 'react-redux';
 import Notification, {NotificationType} from '../Notification';
 import AddMultipleStudents from './AddMultipleStudents';
 import Button from '../Button';
+import experiments from '@cdo/apps/util/experiments';
+
+const showShareColumn = experiments.isEnabled(experiments.SHARE_COLUMN);
 
 export const studentSectionDataPropType = PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -176,7 +180,16 @@ class ManageStudentsTable extends Component {
           />
         }
         {numberOfEditingRows <= 1 &&
-          i18n.actions()
+          <span>
+            <div style={{width: '40%', float: 'left'}}>
+              {i18n.actions()}
+            </div>
+            <div style={{width: '40%', float: 'left'}}>
+              {showShareColumn &&
+                <ManageStudentsActionsHeaderCell/>
+              }
+            </div>
+          </span>
         }
       </div>
     );

apps/src/templates/tables/QuickActionsCell.jsx

@@ -1,30 +1,62 @@
 import React, {Component, PropTypes} from 'react';
+import Radium from 'radium';
 import color from "../../util/color";
 import PopUpMenu from "@cdo/apps/lib/ui/PopUpMenu";
 import styleConstants from '../../styleConstants';
 import throttle from 'lodash/debounce';
+import FontAwesome from '../FontAwesome';
+
+export const QuickActionsCellType = {
+  header: 'header',
+  body: 'body'
+};
 
 const styles = {
-  actionButton:{
-    border: '1px solid ' + color.white,
-    paddingLeft: 5,
-    paddingRight: 5,
-    paddingTop: 4,
-    paddingBottom: 4,
-    borderRadius: 5,
-    color: color.lighter_gray,
-    margin: 3,
-    cursor: 'pointer',
+  actionButton: {
+    [QuickActionsCellType.body]: {
+      border: '1px solid ' + color.white,
+      paddingLeft: 5,
+      paddingRight: 5,
+      paddingTop: 4,
+      paddingBottom: 4,
+      borderRadius: 5,
+      color: color.lighter_gray,
+      margin: 3,
+      cursor: 'pointer',
+    },
+    [QuickActionsCellType.header]: {
+      paddingLeft: 5,
+      paddingRight: 5,
+      paddingTop: 4,
+      paddingBottom: 4,
+      fontSize: 20,
+      marginTop: -3,
+      color: color.darker_gray,
+      cursor: 'pointer',
+    }
   },
   hoverFocus: {
-    backgroundColor: color.lighter_gray,
-    border: '1px solid ' + color.light_gray,
-    borderRadius: 5,
-    paddingTop: 4,
-    paddingBottom: 4,
-    paddingLeft: 5,
-    paddingRight: 5,
-    color: color.white,
+    [QuickActionsCellType.body]: {
+      backgroundColor: color.lighter_gray,
+      border: '1px solid ' + color.light_gray,
+      borderRadius: 5,
+      paddingTop: 4,
+      paddingBottom: 4,
+      paddingLeft: 5,
+      paddingRight: 5,
+      color: color.white,
+    },
+    [QuickActionsCellType.header]: {
+      paddingLeft: 5,
+      paddingRight: 5,
+      paddingTop: 4,
+      paddingBottom: 4,
+      fontSize: 20,
+      // float: 'right',
+      color: color.darker_gray,
+      margin: 3,
+      cursor: 'pointer',
+    }
   },
 };
 
@@ -33,7 +65,12 @@ class QuickActionsCell extends Component {
     children: PropTypes.oneOfType([
       PropTypes.node,
       PropTypes.array
-    ]).isRequired
+    ]).isRequired,
+    type: PropTypes.oneOf(Object.keys(QuickActionsCellType))
+  };
+
+  static defaultProps = {
+    type: 'body'
   };
 
   state = {
@@ -81,17 +118,22 @@ class QuickActionsCell extends Component {
   };
 
   render() {
+    const {type} = this.props;
     const targetPoint = {top: this.state.menuTop, left: this.state.menuLeft};
 
+    const icons = {
+      header: 'cog',
+      body: 'chevron-down'
+    };
+
     return (
       <span ref={span => this.icon = span}>
-        <a
-          icon="chevron-down"
-          style={this.state.open ? {...styles.actionButton, ...styles.hoverFocus} : styles.actionButton}
+        <FontAwesome
+          icon={icons[type]}
+          style={this.state.open ? styles.hoverFocus[type] : styles.actionButton[type]}
           onClick={this.state.canOpen ? this.open : undefined}
-        >
-          <i className="fa fa-chevron-down ui-test-section-dropdown"></i>
-        </a>
+          className="ui-test-section-dropdown"
+        />
         <PopUpMenu
           targetPoint={targetPoint}
           isOpen={this.state.open}
@@ -105,4 +147,4 @@ class QuickActionsCell extends Component {
   }
 }
 
-export default QuickActionsCell;
+export default Radium(QuickActionsCell);

apps/src/templates/tables/QuickActionsCell.story.jsx

@@ -7,7 +7,7 @@ export default storybook => {
     .storiesOf('QuickActionsCell', module)
     .addStoryTable([
         {
-          name: 'QuickActionsCell',
+          name: 'QuickActionsCell - 2 children',
           description: 'Shown with 2 QuickActions as children',
           story: () => (
             <QuickActionsCell>
@@ -25,5 +25,26 @@ export default storybook => {
             </QuickActionsCell>
           )
         },
+        {
+          name: 'QuickActionsCell - different icon',
+          description: 'Override the default cheveron down icon',
+          story: () => (
+            <QuickActionsCell
+              type="header"
+            >
+              <PopUpMenu.Item
+                onClick={() => {console.log("clicked");}}
+              >
+                {"Action 1"}
+              </PopUpMenu.Item>
+              <MenuBreak/>
+              <PopUpMenu.Item
+                onClick={() => {console.log("clicked");}}
+              >
+                {"Action 2"}
+              </PopUpMenu.Item>
+            </QuickActionsCell>
+          )
+        },
       ]);
   };

apps/src/util/experiments.js

@@ -15,6 +15,7 @@ const STORAGE_KEY = 'experimentsList';
 const GA_EVENT = 'experiments';
 const EXPERIMENT_LIFESPAN_HOURS = 12;
 
+experiments.SHARE_COLUMN = 'shareColumn';
 /**
  * Get our query string. Provided as a method so that tests can mock this.
  */