Merge pull request #2456 from concord-consortium/CLUE-12-teacher-documents-as-curriculum

CLUE-12 Teacher documents as curriculum

Author: scytacki

cypress/e2e/functional/document_tests/bookmark_test_spec.js

@@ -47,6 +47,19 @@ context('Bookmarks', function () {
     resourcesPanel.getCanvasItemTitle('my-work', 'bookmarks').contains(copyDocumentTitle).should('exist');
     resourcesPanel.getCanvasItemTitle('my-work', 'bookmarks').contains(title).should('exist');
 
+    cy.log('verify second document can be opened in bookmarks panel');
+    resourcesPanel.getFocusDocumentTitle().contains(title);
+    resourcesPanel.getCanvasItemTitle('my-work', 'bookmarks').contains(copyDocumentTitle).click();
+    // There is confusing behavior here where the first click on another document doesn't open this as the
+    // the second document, instead it toggles the primary document to be this one. This happens
+    // because there is no explicit primary document initially. So this first click tries to set this
+    // secondary document but because there is no primary the persistent ui stores it as the primary doc.
+    resourcesPanel.getFocusDocumentTitle().contains(copyDocumentTitle);
+    // Now clicking back on the first document in the list should open it as the "secondary" document.
+    resourcesPanel.getCanvasItemTitle('my-work', 'bookmarks').contains(title).click();
+    resourcesPanel.getPrimaryFocusDocumentTitle().contains(copyDocumentTitle);
+    resourcesPanel.getSecondaryFocusDocumentTitle().contains(title);
+
     cy.log('verify publish personal document');
     canvas.publishCanvas("personal");
     resourcesPanel.openTopTab('class-work');

cypress/support/elements/common/ResourcesPanel.js

@@ -99,5 +99,27 @@ class ResourcesPanel{
         // but the top level (navTab) of this sub tab is not active/selected.
         return cy.get('.nav-tab-panel .react-tabs__tab-panel--selected .react-tabs__tab-panel--selected .edit-button');
     }
+
+    getFocusDocument() {
+      return cy.get('.focus-document');
+    }
+
+    getFocusDocumentTitle() {
+      return this.getFocusDocument().find('.document-title');
+    }
+
+    // The Primary and Secondary documents are used in the bookmarks tab
+    getPrimaryFocusDocument() {
+      return cy.get('.focus-document.primary');
+    }
+    getPrimaryFocusDocumentTitle() {
+      return this.getFocusDocument().find('.document-title');
+    }
+    getSecondaryFocusDocument() {
+      return cy.get('.focus-document.secondary');
+    }
+    getSecondaryFocusDocumentTitle() {
+      return this.getFocusDocument().find('.document-title');
+    }
 }
 export default ResourcesPanel;

src/clue/components/teacher/teacher-group-six-pack-fourup.tsx

@@ -87,7 +87,7 @@ const TeacherGroupHeader: React.FC<IGroupHeaderProps> = observer(function Teache
     {group, navTabName, documentViewMode}){
   const { ui, persistentUI, db, groups, user: { isResearcher } }  = useStores();
 
-  const openDocId = persistentUI.tabs.get(navTabName)?.openDocuments.get(group.id);
+  const openDocId = persistentUI.tabs.get(navTabName)?.getDocumentGroup(group.id)?.primaryDocumentKey;
   const groupModel = groups.getGroupById(group.id);
   const focusedGroupUser = getFocusedGroupUser(groupModel, openDocId, documentViewMode);
 

src/components/chat/commented-documents.tsx

@@ -5,7 +5,9 @@ import { useFirestore } from "../../hooks/firestore-hooks";
 import { useStores } from "../../hooks/use-stores";
 import { useDocumentCaption } from "../../hooks/use-document-caption";
 import { UserModelType } from "../../models/stores/user";
-import { getNavTabOfDocument, getTabsOfCurriculumDoc, isStudentWorkspaceDoc } from "../../models/stores/persistent-ui";
+import {
+  getNavTabOfDocument, getTabsOfCurriculumDoc, isStudentWorkspaceDoc
+} from "../../models/stores/persistent-ui/persistent-ui";
 import { DocumentModelType } from "../../models/document/document";
 import { CommentedDocumentsQuery } from "../../models/commented-documents";
 

src/components/document/document-scroller.tsx

@@ -21,8 +21,8 @@ interface IProps {
 export const DocumentScroller: React.FC<IProps> = observer(function DocumentThumbnailCarousel(props: IProps) {
   const { documentGroup } = props;
   const { documents, networkDocuments, persistentUI, sortedDocuments } = useStores();
-  const tabState = persistentUI.tabs.get(ENavTab.kSortWork);
-  const openDocumentKey = tabState?.openSubTab && tabState?.openDocuments.get(tabState.openSubTab);
+  const maybeTabState = persistentUI.tabs.get(ENavTab.kSortWork);
+  const openDocumentKey = maybeTabState?.currentDocumentGroup?.primaryDocumentKey;
   const documentScrollerRef = useRef<HTMLDivElement>(null);
   const documentListRef = useRef<HTMLDivElement>(null);
   const [scrollToLocation, setScrollToLocation] = useState(0);
@@ -31,11 +31,12 @@ export const DocumentScroller: React.FC<IProps> = observer(function DocumentThum
   const maxScrollTo = scrollWidth - panelWidth;
 
   const handleSelectDocument = async (document: DocumentModelType) => {
-    if (!tabState?.openSubTab) {
-      console.error("No openSubTab found in persistentUI");
+    const tabState = persistentUI.getOrCreateTabState(ENavTab.kSortWork);
+    if (!tabState.currentDocumentGroupId) {
+      console.error("No currentDocumentGroupId found in persistentUI");
       return;
     }
-    persistentUI.openSubTabDocument(ENavTab.kSortWork, tabState?.openSubTab, document.key);
+    tabState.openDocumentGroupPrimaryDocument(tabState.currentDocumentGroupId, document.key);
     logDocumentViewEvent(document);
   };
 

src/components/document/sort-work-document-area.tsx

@@ -25,8 +25,8 @@ export const SortWorkDocumentArea: React.FC<IProps> = observer(function SortWork
   const { openDocumentsGroup } = props;
   const {appConfig, class: classStore, documents, networkDocuments,
     persistentUI, sortedDocuments, ui, unit, user} = useStores();
-  const tabState = persistentUI.tabs.get(ENavTab.kSortWork);
-  const openDocumentKey = tabState?.openSubTab && tabState?.openDocuments.get(tabState.openSubTab);
+  const maybeTabState = persistentUI.tabs.get(ENavTab.kSortWork);
+  const openDocumentKey = maybeTabState?.currentDocumentGroup?.primaryDocumentKey;
   const showScroller = persistentUI.showDocumentScroller;
   const [prevBtnEnabled, setPrevBtnEnabled] = useState(openDocumentKey !== openDocumentsGroup.documents.at(0)?.key);
   const [nextBtnEnabled, setNextBtnEnabled] = useState(openDocumentKey !== openDocumentsGroup.documents.at(-1)?.key);
@@ -83,7 +83,7 @@ export const SortWorkDocumentArea: React.FC<IProps> = observer(function SortWork
   };
 
   const handleCloseButtonClick = () => {
-    persistentUI.closeSubTabDocument();
+    persistentUI.closeDocumentGroupPrimaryDocument();
   };
 
   const handleToggleScroller = () => {
@@ -95,13 +95,16 @@ export const SortWorkDocumentArea: React.FC<IProps> = observer(function SortWork
     const currentIndex = docKeys.indexOf(openDocumentKey);
     const newIndex = direction === "previous" ? currentIndex - 1 : currentIndex + 1;
     const newKey = docKeys[newIndex];
-    const openSubTab = persistentUI.tabs.get(ENavTab.kSortWork)?.openSubTab;
+    // When the document was opened by the SortedSection, the tab state should have been
+    // created, and currentDocumentGroupId set represent the group that the document was
+    // opened from.
+    const openSubTab = maybeTabState?.currentDocumentGroupId;
     if (!openSubTab) {
-      console.error("No openSubTab found in persistentUI");
+      console.error("No currentDocumentGroupId found in persistentUI");
       return;
     }
     if (newKey) {
-      persistentUI.openSubTabDocument(ENavTab.kSortWork, openSubTab, newKey);
+      persistentUI.openDocumentGroupPrimaryDocument(ENavTab.kSortWork, openSubTab, newKey);
     }
     setPrevBtnEnabled(newIndex !== 0);
     setNextBtnEnabled(newIndex !== docKeys.length - 1);

src/components/document/sort-work-view.tsx

@@ -73,22 +73,27 @@ export const SortWorkView: React.FC = observer(function SortWorkView() {
   const primarySearchTerm = normalizeSortString(primarySortBy) as PrimarySortType;
   const sortedDocumentGroups = sortedDocuments.sortBy(primarySearchTerm);
   const secondarySearchTerm = normalizeSortString(secondarySortBy) as SecondarySortType;
-  const tabState = persistentUI.tabs.get(ENavTab.kSortWork);
-  const openDocumentKey = tabState?.openSubTab && tabState?.openDocuments.get(tabState.openSubTab);
+  const maybeTabState = persistentUI.tabs.get(ENavTab.kSortWork);
+  const openDocumentKey = maybeTabState?.currentDocumentGroup?.primaryDocumentKey;
 
   const getOpenDocumentsGroup = () => {
     let openGroup;
-    if (tabState?.openSubTab && openDocumentKey) {
+    if (maybeTabState?.currentDocumentGroupId && openDocumentKey) {
       let openGroupMetadata: IOpenDocumentsGroupMetadata;
       try {
-        openGroupMetadata = JSON.parse(tabState.openSubTab);
+        // The sort work tab stores the group metadata as the document group id.
+        // This way it can record both the primary and secondary filter values
+        // associated with the group.
+        // TODO: create different tabState and/or document group types so these
+        // values can be stored as fields in the document group
+        openGroupMetadata = JSON.parse(maybeTabState.currentDocumentGroupId);
       } catch (e) {
-        persistentUI.closeSubTabDocument(ENavTab.kSortWork);
+        persistentUI.closeDocumentGroupPrimaryDocument(ENavTab.kSortWork);
         return;
       }
 
       if (openGroupMetadata.primaryType !== primarySearchTerm) {
-        persistentUI.closeSubTabDocument(ENavTab.kSortWork);
+        persistentUI.closeDocumentGroupPrimaryDocument(ENavTab.kSortWork);
       } else {
         openGroup = sortedDocumentGroups.find(group => group.label === openGroupMetadata.primaryLabel);
         if (openGroupMetadata.secondaryType === secondarySearchTerm) {

src/components/document/sorted-section.tsx

@@ -47,14 +47,21 @@ export const SortedSection: React.FC<IProps> = observer(function SortedSection(p
 
   const handleSelectDocument = (docGroup: DocumentGroup) => {
     const { label, sortType } = docGroup;
-    const openSubTabMetadata: IOpenDocumentsGroupMetadata = secondarySort === "None"
+    const openDocGroupMetadata: IOpenDocumentsGroupMetadata = secondarySort === "None"
                                ? { primaryLabel: label, primaryType: sortType }
                                : { primaryLabel: documentGroup.label, primaryType: documentGroup.sortType,
                                    secondaryLabel: label, secondaryType: sortType };
 
     return async (document: DocumentModelType | IDocumentMetadataModel) => {
-      const openSubTab = JSON.stringify(openSubTabMetadata);
-      persistentUI.openSubTabDocument(ENavTab.kSortWork, openSubTab, document.key);
+      // The sort work tab stores the group metadata as the document group id.
+      // This way it can record both the primary and secondary filter values
+      // associated with the group.
+      // TODO: create different tabState and/or document group types so these
+      // values can be stored as fields in the document group
+      const documentGroupId = JSON.stringify(openDocGroupMetadata);
+      const tabState = persistentUI.getOrCreateTabState(ENavTab.kSortWork);
+      tabState.openDocumentGroupPrimaryDocument(documentGroupId, document.key);
+
       logDocumentViewEvent(document);
     };
   };

src/components/document/student-group-view.tsx

@@ -16,9 +16,10 @@ export const StudentGroupView:React.FC = observer(function StudentGroupView(){
 
   useEffect(() => stores.initializeStudentWorkTab(), [stores]);
 
-  const selectedGroupId = persistentUI.tabs.get("student-work")?.openSubTab || "";
+  const maybeTabUIModel = persistentUI.tabs.get("student-work");
+  const selectedGroupId = maybeTabUIModel?.currentDocumentGroupId || "";
   const group = groups.getGroupById(selectedGroupId);
-  const openDocId = persistentUI.tabs.get("student-work")?.openDocuments.get(selectedGroupId);
+  const openDocId = maybeTabUIModel?.getDocumentGroup(selectedGroupId)?.primaryDocumentKey;
   const focusedGroupUser = getFocusedGroupUser(group, openDocId, DocumentViewMode.Live);
   const isChatPanelShown = persistentUI.showChatPanel;
   const documentSelectedForComment = persistentUI.showChatPanel && (ui.selectedTileIds.length === 0)
@@ -53,12 +54,12 @@ const GroupViewTitlebar: React.FC<IGroupComponentProps> = observer(function Grou
 
   const handleFocusedUserChange = (selectedUser: GroupUserModelType) => {
     group?.id && selectedUser.problemDocument &&
-      persistentUI.openSubTabDocument("student-work", group.id, selectedUser.problemDocument.key);
+      persistentUI.openDocumentGroupPrimaryDocument("student-work", group.id, selectedUser.problemDocument.key);
   };
 
   const handleSelectGroup = (id: string) => {
-    persistentUI.setOpenSubTab("student-work", id);
-    persistentUI.closeSubTabDocument("student-work", id);
+    persistentUI.setCurrentDocumentGroupId("student-work", id);
+    persistentUI.closeDocumentGroupPrimaryDocument("student-work", id);
     Logger.log(LogEventName.VIEW_GROUP, {group: id, via: "group-document-titlebar"});
   };
 

src/components/four-up.tsx

@@ -123,6 +123,10 @@ export class FourUpComponent extends BaseComponent<IProps, IState> {
     this.resizeObserver.disconnect();
   }
 
+  private get tabName() {
+    return getUIStudentWorkTab(this.props.documentViewMode);
+  }
+
   /**
    * When the four-up is used in the dashboard it can be showing published
    * documents. In that case we use a fake tab called student-work-published
@@ -131,14 +135,14 @@ export class FourUpComponent extends BaseComponent<IProps, IState> {
    *
    * @returns
    */
-  private getNavTabName() {
-    return getUIStudentWorkTab(this.props.documentViewMode);
+  private get tabUIModel() {
+    const {persistentUI} = this.stores;
+    return persistentUI.tabs.get(this.tabName);
   }
 
   private getFocusedUserDocKey() {
-    const {persistentUI} = this.stores;
     const {group} = this.props;
-    return persistentUI.tabs.get(this.getNavTabName())?.openDocuments.get(group.id);
+    return this.tabUIModel?.getDocumentGroup(group.id)?.primaryDocumentKey;
   }
 
   private getFocusedGroupUser() {
@@ -400,24 +404,25 @@ export class FourUpComponent extends BaseComponent<IProps, IState> {
   };
 
   private handleFourUpClick = () => {
-    const { persistentUI } = this.stores;
     const { group } = this.props;
-    persistentUI.closeSubTabDocument(this.getNavTabName(),  group.id);
+    this.tabUIModel?.getDocumentGroup(group.id)?.closePrimaryDocument();
   };
 
   private handleOverlayClick = (groupUser?: GroupUserModelType) => {
-    const { persistentUI } = this.stores;
     const { group } = this.props;
     const focusedUser = this.getFocusedGroupUser();
     const document = this.getGroupUserDoc(groupUser);
+    const {persistentUI} = this.stores;
 
     if (groupUser && document) {
       const logInfo = {groupId: group.id, studentId: groupUser.id};
       if (focusedUser){
-        persistentUI.closeSubTabDocument(this.getNavTabName(), group.id);
+        // This needs to create the tabModel if it doesn't exist so we can use this.tabModel
+        persistentUI.closeDocumentGroupPrimaryDocument(this.tabName, group.id);
         Logger.log(LogEventName.DASHBOARD_DESELECT_STUDENT, logInfo);
       } else {
-        persistentUI.setOpenSubTabDocument(this.getNavTabName(), group.id, document.key); //sets the focus document;
+        // This needs to create the tabModel if it doesn't exist so we can use this.tabModel
+        persistentUI.setDocumentGroupPrimaryDocument(this.tabName, group.id, document.key); //sets the focus document;
         Logger.log(LogEventName.DASHBOARD_SELECT_STUDENT, logInfo);
       }
     }

src/components/navigation/document-browser-scroller.tsx

@@ -2,15 +2,15 @@ import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { clamp } from "lodash";
 import { DocumentModelType } from "../../models/document/document";
-import { ISubTabSpec, NavTabModelType } from "../../models/view/nav-tabs";
+import { ISubTabModel, NavTabModelType } from "../../models/view/nav-tabs";
 import { DocumentCollectionList } from "../thumbnail/document-collection-list";
 import ScrollArrowIcon from "../../assets/scroll-arrow-icon.svg";
 import CollapseScrollerIcon from "../../assets/show-hide-document-view-icon.svg";
 
 import "./document-browser-scroller.scss";
 
 interface DocumentBrowserScrollerProps {
-  subTab: ISubTabSpec;
+  subTab: ISubTabModel;
   tabSpec: NavTabModelType;
   openDocumentKey: string;
   openSecondaryDocumentKey: string;