186506915 sort by bookmarks starred

cypress/e2e/functional/document_tests/canvas_test_spec.js

@@ -385,8 +385,8 @@ context('Test Canvas', function () {
     resourcesPanel.getCanvasItemTitle("my-work", "workspaces").contains(studentWorkspace).should('not.exist');
 
     cy.log('verify starred document is no longer in the Starred section after delete');
-    cy.openSection('my-work', 'starred');
-    cy.getCanvasItemTitle('my-work', 'starred').should('not.exist');
+    cy.openSection('my-work', 'bookmarks');
+    cy.getCanvasItemTitle('my-work', 'bookmarks').should('not.exist');
 
     cy.log("Canvas unit config test");
     beforeTest(queryParams2);

cypress/e2e/functional/document_tests/nav_panel_test_spec.js

@@ -22,6 +22,9 @@ function beforeTest(params) {
   cy.waitForLoad();
 }
 
+//TODO: change all syntax from starred to bookmarks/"bookmarked"
+//https://www.pivotaltracker.com/n/projects/2441242/stories/186891632
+
 context('Nav Panel', function () {
   it('Test nav panel tabs', function () {
     beforeTest(queryParams1);
@@ -102,13 +105,13 @@ context('Nav Panel', function () {
       resourcesPanel.getCanvasStarIcon('my-work', 'workspaces', copyDocumentTitle).should('have.class', 'starred');
 
       cy.log('verify starred document appears in the Starred section');
-      cy.openSection('my-work', 'starred');
-      resourcesPanel.getCanvasItemTitle('my-work', 'starred').contains(copyDocumentTitle).should('exist');
+      cy.openSection('my-work', 'bookmarks');
+      resourcesPanel.getCanvasItemTitle('my-work', 'bookmarks').contains(copyDocumentTitle).should('exist');
 
       cy.log('remains open after the resources panel is collapsed and expand');
       cy.collapseResourceTabs();
       cy.openResourceTabs();
-      cy.get('.doc-tab.my-work.starred').should('have.class', 'selected');
+      cy.get('.doc-tab.my-work.bookmarks').should('have.class', 'selected');
 
       cy.log('verify Learning Log Section');
       cy.openTopTab('my-work');
@@ -137,7 +140,6 @@ context('Nav Panel', function () {
       cy.openSection("class-work", "learning-logs");
       resourcesPanel.getCanvasItemTitle("class-work", "learning-logs", "Learning Log Copy");
 
-
       cy.log('Class Work tab tests');
       cy.openTopTab('class-work');
 
@@ -188,6 +190,7 @@ context('Nav Panel', function () {
 
     cy.log('Customized tabs');
     const exampleProblemSubTabTitles = ["First Section", "Second Section", "Third Section"];
+    //TODO: Need to change the syntax to "Bookmarks"
     const exampleMyWorkSubTabTitles = ["Workspaces", "Starred"];
     const exampleClassWorkSubTabTitles = ["Workspaces", "Supplemental Work", "Starred"];
 

cypress/e2e/functional/teacher_tests/teacher_curation_spec.js

@@ -46,8 +46,8 @@ describe('verify document curation', function() {//adding a star to a student do
         cy.wait(1000);
         dashboard.switchView('Workspace & Resources');
         cy.openTopTab('class-work');
-        cy.openSection('class-work','starred');
-        cy.getCanvasItemTitle('class-work', 'starred', studentDoc).should('not.exist');
+        cy.openSection('class-work','bookmarks');
+        cy.getCanvasItemTitle('class-work', 'bookmarks', studentDoc).should('not.exist');
         cy.openSection('class-work','workspaces');
         resourcesPanel.getCanvasStarIcon('class-work','workspaces',studentDoc).should('not.have.class','starred');
     });

src/clue/app-config.json

@@ -96,7 +96,7 @@
               "addDocument": true
             },
             {
-              "title": "Starred",
+              "title": "Bookmarks",
               "type": "starred-problem-documents",
               "dataTestHeader": "my-work-section-starred",
               "documentTypes": ["personal", "problem"],
@@ -165,7 +165,7 @@
             },
             {
               "className": "section problem starred",
-              "title": "Starred",
+              "title": "Bookmarks",
               "type": "starred-problem-documents",
               "dataTestHeader": "class-work-section-starred",
               "documentTypes": ["publication"],

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

@@ -42,9 +42,12 @@
     case "Name":
       renderedSortedDocuments = sortedDocuments.sortByName;
       break;
-    case sortTagPrompt:
+    case sortTagPrompt: //Sort by Strategy
       renderedSortedDocuments = sortedDocuments.sortByStrategy;
       break;
+    case "Bookmarked":
+      renderedSortedDocuments = sortedDocuments.sortByBookmarks;
+      break;
   }
 
   //******************************* Click to Open Document  ***************************************

src/components/four-up.sass

@@ -129,12 +129,14 @@
     position: absolute
     right: 10px
     top: 35%
+    height: 42px
+    width: 42px
 
     .icon-star
-      height: 42px
-      width: 42px
+      height: 100%
+      width: 100%
       fill: #fff
       opacity: 0.5
       &.starred
         fill: #fef171
-        opacity: 1
+        opacity: 1

src/components/four-up.tsx

@@ -13,6 +13,7 @@ import { CellPositions, FourUpGridCellModelType, FourUpGridModel, FourUpGridMode
 import { Logger } from "../lib/logger";
 import { LogEventName } from "../lib/logger-types";
 import FourUpIcon from "../clue/assets/icons/4-up-icon.svg";
+import ThumbnailBookmark from "../assets/thumbnail-bookmark-icon.svg";
 
 import "./four-up.sass";
 
@@ -267,7 +268,7 @@ export class FourUpComponent extends BaseComponent<IProps, IState> {
       return (
         <div className="icon-holder" onClick={handleStarClick}>
           <svg className={"icon-star " + (isStarred ? "starred" : "")} >
-            <use xlinkHref="#icon-outline-star"/>
+            <ThumbnailBookmark/>
           </svg>
         </div>
       );

src/components/navigation/document-view.tsx

@@ -5,7 +5,7 @@
 import { useAppConfig, useLocalDocuments, useProblemStore, useStores,
   usePersistentUIStore, useUserStore, useClassStore, useUIStore } from "../../hooks/use-stores";
 import { useUserContext } from "../../hooks/use-user-context";
-import { ISubTabSpec, NavTabModelType } from "src/models/view/nav-tabs";
+import { ISubTabSpec, NavTabModelType, kBookmarksTabTitle } from "../../models/view/nav-tabs";
 import { DocumentType } from "../../models/document/document-types";
 import { LogEventName } from "../../lib/logger-types";
 import { logDocumentEvent } from "../../models/document/log-document-event";
@@ -37,13 +37,13 @@
   const openSecondaryDocumentKey = tabState?.openSecondaryDocuments.get(subTab.label) || "";
   const openSecondaryDocument = store.documents.getDocument(openSecondaryDocumentKey) ||
     store.networkDocuments.getDocument(openSecondaryDocumentKey);
-  const isStarredTab = subTab.label === "Starred";
+  const isStarredTab = subTab.label === kBookmarksTabTitle;
   const noValidDocument = !openDocument || openDocument.getProperty("isDeleted");
   const noSecondaryDocument = !openSecondaryDocument || openSecondaryDocument.getProperty("isDeleted");
 
   const documentTypes: DocumentType[] = tabSpec.tab === "class-work"
                                           ? ["publication"]
-                                          : tabSpec.tab === "my-work" && subTab.label === "Starred"
+                                          : tabSpec.tab === "my-work" && subTab.label === kBookmarksTabTitle
                                             ? ["problem", "personal"]
                                             : [];
   const getStarredDocuments = (types: DocumentType[]) => {
@@ -87,11 +87,11 @@
       } else {
         persistentUI.closeSubTabDocument(tabSpec.tab, subTab.label);
       }
-    } else if (tabState?.openDocuments.get("Starred")) {
+    } else if (tabState?.openDocuments.get(kBookmarksTabTitle)) {
       if (persistentUI.focusSecondaryDocument === document.key) {
-        persistentUI.closeSubTabSecondaryDocument(tabSpec.tab, "Starred");
+        persistentUI.closeSubTabSecondaryDocument(tabSpec.tab, kBookmarksTabTitle);
       } else {
-        persistentUI.openSubTabSecondaryDocument(tabSpec.tab, "Starred", document.key);
+        persistentUI.openSubTabSecondaryDocument(tabSpec.tab, kBookmarksTabTitle, document.key);
       }
     } else {
       if (!document.hasContent && document.isRemote) {
@@ -284,7 +284,7 @@
         document={openDocument}
         readOnly={true}
         showPlayback={showPlayback}
-        fullHeight={subTab.label !== "Starred" }
+        fullHeight={subTab.label !== kBookmarksTabTitle }
       />
       {onChangeDocument && !hideRightFlipper &&
         <ScrollButton side="right" theme={tab} className="document-flipper"

src/components/navigation/section-document-or-browser.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { useQueryClient } from 'react-query';
 import { DocumentModelType } from "../../models/document/document";
 import { logDocumentEvent } from "../../models/document/log-document-event";
-import { ISubTabSpec, NavTabModelType } from "../../models/view/nav-tabs";
+import { ISubTabSpec, NavTabModelType, kBookmarksTabTitle } from "../../models/view/nav-tabs";
 import { useAppConfig, useClassStore, useProblemStore, useStores,
          useUserStore, usePersistentUIStore } from "../../hooks/use-stores";
 import { Logger } from "../../lib/logger";
@@ -114,7 +114,7 @@ export const SectionDocumentOrBrowser: React.FC<IProps> = observer(function Sect
     const openDocumentKey = tabState?.openDocuments.get(subTab.label) || "";
     const openDocument = store.documents.getDocument(openDocumentKey) ||
                             store.networkDocuments.getDocument(openDocumentKey);
-    const isStarredTab = subTab.label === "Starred";
+    const isStarredTab = subTab.label === kBookmarksTabTitle;
     if (!isStarredTab && (!openDocument || openDocument.getProperty("isDeleted"))) return false;
     return (
       <DocumentView tabSpec={tabSpec} subTab={subTab} />

src/components/thumbnail/document-type-collection.sass

@@ -97,26 +97,31 @@ $section-padding: 6px
 
       .icon-holder
         position: absolute
-        top: 12px
-        right: 14px
+        top: 5px
+        right: 12px
         cursor: pointer
+
         .icon-star
           height: 24px
           width: 24px
-          fill: $charcoal-light-1
+          fill: $charcoal
           opacity: .25
+
           &.starred
             opacity: .75
             fill: $problem-orange
+
         &:hover .icon-star
-          opacity: .25
           fill: $problem-orange
+          opacity: 0.35
+
         &:active .icon-star
           opacity: .75
           fill: $problem-orange
+
         &:active .icon-star.starred
-          opacity: .25
-          fill: $charcoal-light-1
+          opacity: .75
+          fill: $problem-orange
 
       .info
         margin-top: $half-margin

src/components/thumbnail/thumbnail-document-item.tsx

@@ -6,6 +6,7 @@ import { DocumentCaption } from "./document-caption";
 import { ThumbnailPlaceHolderIcon } from "./thumbnail-placeholder-icon";
 import { ThumbnailPrivateIcon } from "./thumbnail-private-icon";
 import { useAppMode, useStores } from "../../hooks/use-stores";
+import ThumbnailBookmark from "../../assets/thumbnail-bookmark-icon.svg";
 import classNames from "classnames";
 
 interface IProps {
@@ -73,8 +74,9 @@ export const ThumbnailDocumentItem: React.FC<IProps> = observer((props: IProps)
             : <ThumbnailPlaceHolderIcon />
         }
       </div>
-      { onDocumentStarClick &&
-          <DocumentStar isStarred={onIsStarred()} onStarClick={handleDocumentStarClick} />
+      {
+        onDocumentStarClick &&
+        <DocumentBookmark isStarred={onIsStarred()} onStarClick={handleDocumentStarClick} />
       }
       <DocumentCaption
         captionText={captionText}
@@ -93,15 +95,16 @@ interface IDocumentStarProps {
   onStarClick: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-const DocumentStar = (props: IDocumentStarProps) => {
+const DocumentBookmark = (props: IDocumentStarProps) => {
   const { isStarred, onStarClick } = props;
+
   return (
     <div className="icon-holder" onClick={onStarClick}>
       <svg className={"icon-star " + (isStarred ? "starred" : "")} >
-        <use xlinkHref="#icon-star"/>
+        <ThumbnailBookmark />
       </svg>
     </div>
-  );
+    );
 };
 
 

src/models/stores/sorted-documents.ts

@@ -51,7 +51,6 @@
   get commentTags(): Record<string, string> | undefined {
     return this.stores.appConfig.commentTags;
   }
-
   get filteredDocsByType(): DocumentModelType[] {
     return this.documents.all.filter((doc: DocumentModelType) => {
       return isSortableType(doc.type);
@@ -200,4 +199,25 @@
       });
     });
   }
+
+
+  //*************************************** Sort By Bookmarks *************************************
+
+  get sortByBookmarks(): SortedDocument[] {
+    const documentMap = new Map();
+    this.filteredDocsByType.forEach((doc) => {
+      const sectionLabel = doc.isStarred ? "Bookmarked" : "Not Bookmarked";
+      if (!documentMap.has(sectionLabel)) {
+        documentMap.set(sectionLabel, {
+          sectionLabel,
+          documents: []
+        });
+      }
+      documentMap.get(sectionLabel).documents.push(doc);
+    });
+
+    const sortedSectionLabels = ["Bookmarked", "Not Bookmarked"];
+    return sortedSectionLabels.filter(label => documentMap.has(label)).map(label => documentMap.get(label));
+
+  }
 }

src/models/view/nav-tabs.ts

@@ -13,6 +13,8 @@ export enum ENavTab {
   kSupports = "supports"
 }
 
+export const kBookmarksTabTitle = "Bookmarks";
+
 // generic type which maps tab id to values of another type
 export type NavTabMap<T> = {
   [K in ENavTab]: T;