From 98a4d3c419c537d0ffabf3df744c650b437ead46 Mon Sep 17 00:00:00 2001 From: Dan Minkevitch Date: Mon, 1 Oct 2018 15:51:57 -0700 Subject: [PATCH] Remove Dashcard Reorder Feature Flag Closes ADMIN-257 Test Plan: * Ensure that you are able to reorder/drag-n-drop dashcards without having to enable any feature flags Change-Id: Ia09c4ee821eb6a867a9521fdff5ccda5c599bcca Reviewed-on: https://gerrit.instructure.com/166529 Tested-by: Jenkins Reviewed-by: Ed Schiebel Reviewed-by: Carl Kibler QA-Review: Anju Reddy Product-Review: Carl Kibler --- app/helpers/dashboard_helper.rb | 5 +- app/jsx/bundles/dashboard_card.js | 11 +- app/jsx/dashboard_card/DashboardCard.js | 181 ++++++++-------- .../DashboardCardBackgroundStore.js | 203 +++++++++--------- app/jsx/dashboard_card/DashboardCardBox.js | 29 +-- app/jsx/dashboard_card/DashboardCardMenu.js | 19 +- .../dashboard_card/DraggableDashboardCard.js | 81 +++---- .../getDroppableDashboardCardBox.js | 28 +-- app/presenters/course_for_menu_presenter.rb | 2 +- app/views/shared/_dashboard_card.html.erb | 2 - lib/feature.rb | 10 - .../dashboard_card/DashboardCardBoxSpec.js | 6 +- .../jsx/dashboard_card/DashboardCardSpec.js | 2 + spec/helpers/dashboard_helper_spec.rb | 3 +- .../dashboard_card/DashboardCardMenuSpec.js | 29 +-- .../DashboardCardReorderingSpec.js | 133 ++++++------ .../course_for_menu_presenter_spec.rb | 3 +- 17 files changed, 339 insertions(+), 408 deletions(-) diff --git a/app/helpers/dashboard_helper.rb b/app/helpers/dashboard_helper.rb index ba9e1c3daa685..a54f7e1ec7eec 100644 --- a/app/helpers/dashboard_helper.rb +++ b/app/helpers/dashboard_helper.rb @@ -155,10 +155,7 @@ def map_courses_for_menu(courses, opts={}) presenter.to_h end - if @domain_root_account.feature_enabled?(:dashcard_reordering) - mapped = mapped.sort_by {|h| h[:position] || ::CanvasSort::Last} - end - mapped + mapped.sort_by {|h| h[:position] || ::CanvasSort::Last} end end diff --git a/app/jsx/bundles/dashboard_card.js b/app/jsx/bundles/dashboard_card.js index 9ad33746b61a1..83b36aadd5bef 100644 --- a/app/jsx/bundles/dashboard_card.js +++ b/app/jsx/bundles/dashboard_card.js @@ -18,7 +18,6 @@ import React from 'react' import ReactDOM from 'react-dom' -import DashboardCardBox from '../dashboard_card/DashboardCardBox' import getDroppableDashboardCardBox from '../dashboard_card/getDroppableDashboardCardBox' import axios from 'axios' @@ -26,17 +25,17 @@ let promiseToGetDashboardCards const sessionStorageKey = `dashcards_for_user_${ENV && ENV.current_user_id}` -export default function loadCardDashboard () { - const Box = ENV.DASHBOARD_REORDERING_ENABLED ? getDroppableDashboardCardBox() : DashboardCardBox +export default function loadCardDashboard() { + const Box = getDroppableDashboardCardBox() const dashboardContainer = document.getElementById('DashboardCard_Container') function render(dashboardCards) { ReactDOM.render( , dashboardContainer + />, + dashboardContainer ) } @@ -47,7 +46,7 @@ export default function loadCardDashboard () { if (!promiseToGetDashboardCards) { promiseToGetDashboardCards = axios.get('/dashboard/dashboard_cards').then(({data}) => data) - promiseToGetDashboardCards.then((dashboardCards) => + promiseToGetDashboardCards.then(dashboardCards => sessionStorage.setItem(sessionStorageKey, JSON.stringify(dashboardCards)) ) } diff --git a/app/jsx/dashboard_card/DashboardCard.js b/app/jsx/dashboard_card/DashboardCard.js index 667fcde9ab06c..7f400b2a37cdf 100644 --- a/app/jsx/dashboard_card/DashboardCard.js +++ b/app/jsx/dashboard_card/DashboardCard.js @@ -17,7 +17,7 @@ */ import _ from 'underscore' -import React, { Component } from 'react' +import React, {Component} from 'react' import PropTypes from 'prop-types' import I18n from 'i18n!dashcards' import DashboardCardAction from './DashboardCardAction' @@ -25,7 +25,6 @@ import CourseActivitySummaryStore from './CourseActivitySummaryStore' import DashboardCardMenu from './DashboardCardMenu' export default class DashboardCard extends Component { - // =============== // CONFIG // =============== @@ -43,7 +42,6 @@ export default class DashboardCard extends Component { image: PropTypes.string, handleColorChange: PropTypes.func, hideColorOverlays: PropTypes.bool, - reorderingEnabled: PropTypes.bool, isDragging: PropTypes.bool, connectDragSource: PropTypes.func, connectDropTarget: PropTypes.func, @@ -59,20 +57,19 @@ export default class DashboardCard extends Component { hideColorOverlays: false, handleColorChange: () => {}, image: '', - reorderingEnabled: false, isDragging: false, - connectDragSource: () => {}, - connectDropTarget: () => {}, + connectDragSource: c => c, + connectDropTarget: c => c, moveCard: () => {}, totalCards: 0, position: 0 } - constructor (props) { + constructor(props) { super() this.state = _.extend( - { nicknameInfo: this.nicknameInfo(props.shortName, props.originalName, props.id) }, + {nicknameInfo: this.nicknameInfo(props.shortName, props.originalName, props.id)}, CourseActivitySummaryStore.getStateForCourse(props.id) ) } @@ -81,12 +78,12 @@ export default class DashboardCard extends Component { // LIFECYCLE // =============== - componentDidMount () { + componentDidMount() { CourseActivitySummaryStore.addChangeListener(this.handleStoreChange) this.parentNode = this.cardDiv } - componentWillUnmount () { + componentWillUnmount() { CourseActivitySummaryStore.removeChangeListener(this.handleStoreChange) } @@ -94,48 +91,54 @@ export default class DashboardCard extends Component { // ACTIONS // =============== - settingsClick = (e) => { - if (e) { e.preventDefault(); } - this.toggleEditing(); + settingsClick = e => { + if (e) { + e.preventDefault() + } + this.toggleEditing() } - getCardPosition () { + getCardPosition() { return typeof this.props.position === 'function' ? this.props.position() : this.props.position } - handleNicknameChange = (nickname) => { - this.setState({ nicknameInfo: this.nicknameInfo(nickname, this.props.originalName, this.props.id) }) + handleNicknameChange = nickname => { + this.setState({ + nicknameInfo: this.nicknameInfo(nickname, this.props.originalName, this.props.id) + }) } handleStoreChange = () => { - this.setState( - CourseActivitySummaryStore.getStateForCourse(this.props.id) - ); + this.setState(CourseActivitySummaryStore.getStateForCourse(this.props.id)) } toggleEditing = () => { - const currentState = !!this.state.editing; - this.setState({editing: !currentState}); + const currentState = !!this.state.editing + this.setState({editing: !currentState}) } - headerClick = (e) => { - if (e) { e.preventDefault(); } - window.location = this.props.href; + headerClick = e => { + if (e) { + e.preventDefault() + } + window.location = this.props.href } doneEditing = () => { this.setState({editing: false}) - this.settingsToggle.focus(); + this.settingsToggle.focus() } - handleColorChange = (color) => { - const hexColor = `#${color}`; + handleColorChange = color => { + const hexColor = `#${color}` this.props.handleColorChange(hexColor) } handleMove = (assetString, atIndex) => { if (typeof this.props.moveCard === 'function') { - this.props.moveCard(assetString, atIndex, () => { this.settingsToggle.focus() }) + this.props.moveCard(assetString, atIndex, () => { + this.settingsToggle.focus() + }) } } @@ -143,7 +146,7 @@ export default class DashboardCard extends Component { // HELPERS // =============== - nicknameInfo (nickname, originalName, courseId) { + nicknameInfo(nickname, originalName, courseId) { return { nickname, originalName, @@ -152,28 +155,30 @@ export default class DashboardCard extends Component { } } - unreadCount (icon, stream) { + unreadCount(icon, stream) { const activityType = { 'icon-announcement': 'Announcement', 'icon-assignment': 'Message', 'icon-discussion': 'DiscussionTopic' - }[icon]; - - const itemStream = stream || []; - const streamItem = _.find(itemStream, item => ( - // only return 'Message' type if category is 'Due Date' (for assignments) - item.type === activityType && + }[icon] + + const itemStream = stream || [] + const streamItem = _.find( + itemStream, + item => + // only return 'Message' type if category is 'Due Date' (for assignments) + item.type === activityType && (activityType !== 'Message' || item.notification_category === I18n.t('Due Date')) - )); + ) // TODO: unread count is always 0 for assignments (see CNVS-21227) - return (streamItem) ? streamItem.unread_count : 0; + return streamItem ? streamItem.unread_count : 0 } - calculateMenuOptions () { + calculateMenuOptions() { const position = this.getCardPosition() - const isFirstCard = position === 0; - const isLastCard = position === this.props.totalCards - 1; + const isFirstCard = position === 0 + const isLastCard = position === this.props.totalCards - 1 return { canMoveLeft: !isFirstCard, canMoveRight: !isLastCard, @@ -186,10 +191,10 @@ export default class DashboardCard extends Component { // RENDERING // =============== - linksForCard () { - return this.props.links.map((link) => { + linksForCard() { + return this.props.links.map(link => { if (!link.hidden) { - const screenReaderLabel = `${link.label} - ${this.state.nicknameInfo.nickname}`; + const screenReaderLabel = `${link.label} - ${this.state.nicknameInfo.nickname}` return ( - ); + ) } - return null; - }); + return null + }) } - renderHeaderHero () { - const { - image, - backgroundColor, - hideColorOverlays - } = this.props; + renderHeaderHero() { + const {image, backgroundColor, hideColorOverlays} = this.props if (image) { return ( -
+
- ); + ) } return ( @@ -235,17 +233,13 @@ export default class DashboardCard extends Component { onClick={this.headerClick} aria-hidden="true" /> - ); + ) } - renderHeaderButton () { - const { - backgroundColor, - hideColorOverlays - } = this.props; + renderHeaderButton() { + const {backgroundColor, hideColorOverlays} = this.props - const reorderingProps = this.props.reorderingEnabled && { - reorderingEnabled: this.props.reorderingEnabled, + const reorderingProps = { handleMove: this.handleMove, currentPosition: this.getCardPosition(), lastPosition: this.props.totalCards - 1, @@ -269,14 +263,15 @@ export default class DashboardCard extends Component { trigger={