Manage Students Table: UI for cog icon drop down in action header cell

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

@@ -6,28 +6,28 @@ import PasswordReset from './PasswordReset';
 import ShowSecret from './ShowSecret';
 import {SectionLoginType} from '@cdo/apps/util/sharedConstants';
 import i18n from "@cdo/locale";
-import FontAwesome from '../FontAwesome';
 import {tableLayoutStyles, sortableOptions} from "../tables/tableConstants";
 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);
+
 const styles = {
-  cog: {
-    marginLeft: 10,
-    fontSize: 20,
+  inline: {
+    width: '40%',
+    float: 'left',
   },
 };
 
-const showShareColumn = experiments.isEnabled(experiments.SHARE_COLUMN);
-
 const LOGIN_TYPES_WITH_PASSWORD_COLUMN = [
   SectionLoginType.word,
   SectionLoginType.picture,
@@ -203,10 +203,14 @@ class ManageStudentsTable extends Component {
         }
         {numberOfEditingRows <= 1 &&
           <span>
-            {i18n.actions()}
-            {showShareColumn &&
-              <FontAwesome icon="cog" style={styles.cog}/>
-            }
+            <div style={styles.inline}>
+              {i18n.actions()}
+            </div>
+            <div style={styles.inline}>
+              {showShareColumn &&
+                <ManageStudentsActionsHeaderCell/>
+              }
+            </div>
           </span>
         }
       </div>

apps/src/templates/tables/QuickActionsCell.jsx

@@ -3,37 +3,55 @@ 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,
+  icon: {
     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,
+      borderRadius: 5,
+      color: color.lighter_gray,
+      margin: 3,
+    },
+    [QuickActionsCellType.header]: {
+      fontSize: 20,
+      lineHeight: '15px',
+      color: color.darker_gray,
+    }
+  },
   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,
+      color: color.white,
+    },
   },
 };
 
-class QuickActionsCell extends Component {
+export default class QuickActionsCell extends Component {
   static propTypes = {
     children: PropTypes.oneOfType([
       PropTypes.node,
       PropTypes.array
-    ]).isRequired
+    ]).isRequired,
+    type: PropTypes.oneOf(Object.keys(QuickActionsCellType))
+  };
+
+  static defaultProps = {
+    type: QuickActionsCellType.body
   };
 
   state = {
@@ -81,17 +99,33 @@ 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'
+    };
+
+    const styleByType = type === QuickActionsCellType.header ?
+      styles.actionButton["header"] :
+      this.state.open ?
+        styles.hoverFocus["body"] :
+        styles.actionButton["body"];
+
+    const iconStyle = {
+      ...styles.icon,
+      ...styleByType
+    };
+
     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={iconStyle}
           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}
@@ -104,5 +138,3 @@ class QuickActionsCell extends Component {
     );
   }
 }
-
-export default QuickActionsCell;

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

@@ -7,8 +7,8 @@ export default storybook => {
     .storiesOf('QuickActionsCell', module)
     .addStoryTable([
         {
-          name: 'QuickActionsCell',
-          description: 'Shown with 2 QuickActions as children',
+          name: 'QuickActionsCell - default body',
+          description: 'Shown with 2 QuickActions as children, the default body cell has a down chevron',
           story: () => (
             <QuickActionsCell>
               <PopUpMenu.Item
@@ -25,5 +25,26 @@ export default storybook => {
             </QuickActionsCell>
           )
         },
+        {
+          name: 'QuickActionsCell - header',
+          description: 'Override the default cheveron down icon for use in the header cell',
+          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>
+          )
+        },
       ]);
   };