disable interactions with the listing if notes are being edited

opentech/static_src/src/app/src/components/Listing/index.js

@@ -22,6 +22,7 @@ export default class Listing extends React.Component {
         handleRetry: PropTypes.func,
         listRef: PropTypes.object,
         column: PropTypes.string,
+        isEditing: PropTypes.bool,
     };
 
     renderListItems() {
@@ -88,6 +89,7 @@ export default class Listing extends React.Component {
             items,
             column,
             listRef,
+            isEditing,
         } = this.props;
 
 
@@ -106,7 +108,7 @@ export default class Listing extends React.Component {
         return (
             <>
                 { isLoading && <InlineLoading /> }
-                <ul className={`listing listing--${column}`} ref={listRef}>
+                <ul className={`listing listing--${column} ${isEditing ? 'disabled' : ''}`} ref={listRef}>
                     {this.renderListItems()}
                 </ul>
             </>

opentech/static_src/src/app/src/components/Listing/style.scss

 .listing {
     overflow-y: overlay;
     flex-grow: 3;
+    transition: opacity $transition;
 
     @include target-ie11 {
         max-width: 390px;
         width: 100%;
     }
 
-    &__header {
-        height: $listing-header-height;
+    &.is-blank {
         padding: 20px;
+        text-align: center;
+    }
+
+    &.disabled {
+        opacity: .5;
+        pointer-events: none;
     }
 
     // ensures the last item will be at the top of the column after navigating to it via the dropdown
@@ -29,9 +35,9 @@
         box-shadow: inset 0 -20px 20px -10px $color--light-mid-grey;
     }
 
-    &.is-blank {
+    &__header {
+        height: $listing-header-height;
         padding: 20px;
-        text-align: center;
     }
 
     // inner <li>'s

opentech/static_src/src/app/src/containers/NoteListing.js

@@ -12,10 +12,12 @@ import {
     getNotesErrorMessage,
     getNoteIDsForSubmissionOfID,
     getNotesFetchState,
+    getNoteEditingState
 } from '@selectors/notes';
 
 
-const NoteListing = ({loadNotes, submissionID, noteIDs, isErrored, errorMessage, isLoading }) => {
+const NoteListing = ({ loadNotes, submissionID, noteIDs, isErrored, errorMessage, isLoading, isEditing }) => {
+
     const fetchNotes = () => loadNotes(submissionID)
 
     const {start, stop } = useInterval(fetchNotes, 30000)
@@ -40,6 +42,7 @@ const NoteListing = ({loadNotes, submissionID, noteIDs, isErrored, errorMessage,
 
     return (
         <Listing
+            isEditing={isEditing}
             isLoading={ isLoading }
             isErrored={ isErrored }
             errorMessage={ errorMessage }
@@ -58,6 +61,7 @@ NoteListing.propTypes = {
     isErrored: PropTypes.bool,
     errorMessage: PropTypes.string,
     isLoading: PropTypes.bool,
+    isEditing: PropTypes.bool,
 };
 
 
@@ -70,6 +74,7 @@ const mapStateToProps = (state, ownProps) => ({
     isLoading: getNotesFetchState(state),
     isErrored: getNotesErrorState(state),
     errorMessage: getNotesErrorMessage(state),
+    isEditing: getNoteEditingState(state),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoteListing);

opentech/static_src/src/app/src/redux/selectors/notes.js

@@ -35,3 +35,5 @@ const getNoteCreatingState = state => state.notes.isCreating;
 export const getNoteCreatingStateForSubmission = submissionID => createSelector(
     [getNoteCreatingState], creatingStates => creatingStates.includes(submissionID)
 );
+
+export const getNoteEditingState = state => state.notes.isEditing;