Feat/531/bookmark enhancements (#554)

* feat(545): add quick filters ui * feat(545): add quick filters backend * feat(545): fix test check * feat(545): add tests * Create big-seals-smash.md * feat(545): fix bugs * feat(545): add more tests * feat(545): add more tests * feat(545): remove test code * feat(545): remove console log * feat(531): add bookmark toggle to bookmark list items * feat(531): update home grid * Create itchy-flies-tickle.md * feat(531): fixed button focus * feat(531): fix removing bookmarks bug * feat(531): removed bad changeset * feat(531): add semicolon
SAP · Aug 10, 2023 · d2184d6 · d2184d6
1 parent f388695
commit d2184d6
Show file tree

Hide file tree

Showing 14 changed files with 1,267 additions and 209 deletions.
diff --git a/.changeset/itchy-flies-tickle.md b/.changeset/itchy-flies-tickle.md
@@ -0,0 +1,5 @@
+---
+"@sap/guided-answers-extension-webapp": minor
+---
+
+Feat/531/bookmark enhancements
diff --git a/packages/webapp/src/webview/state/reducers.ts b/packages/webapp/src/webview/state/reducers.ts
@@ -258,6 +258,8 @@ function goToHomePageReducer(newState: AppState): AppState {
     newState.activeGuidedAnswerNode = [];
     newState.selectedComponentFilters = [];
     newState.selectedProductFilters = [];
+    newState.guidedAnswerTreeSearchResult.componentFilters = [];
+    newState.guidedAnswerTreeSearchResult.productFilters = [];
     return newState;
 }
 

diff --git a/packages/webapp/src/webview/ui/components/App/App.tsx b/packages/webapp/src/webview/ui/components/App/App.tsx
@@ -14,9 +14,6 @@ import InfiniteScroll from 'react-infinite-scroll-component';
 import { SpinnerSize } from '@fluentui/react';
 import i18next from 'i18next';
 import { VscStarFull } from 'react-icons/vsc';
-import { Bookmarks } from '../Bookmarks';
-import { LastVisited } from '../LastVisited';
-import { QuickFilters } from '../QuickFilters';
 import { TreeItemBottomSection } from '../TreeItemBottomSection';
 import { HomeGrid } from '../HomeGrid';
 
@@ -89,18 +86,7 @@ export function App(): ReactElement {
     } else if (appState.activeScreen === 'NODE') {
         content = <GuidedAnswerNode />;
     } else if (appState.activeScreen === 'HOME') {
-        content = appState.betaFeatures ? (
-            <HomeGrid>
-                {!!appState.lastVisitedGuides.length && <LastVisited />}
-                {!!Object.keys(appState.bookmarks).length && <Bookmarks />}
-                {!!appState.quickFilters.length && <QuickFilters />}
-            </HomeGrid>
-        ) : (
-            <>
-                {!!appState.lastVisitedGuides.length && <LastVisited />}
-                <Bookmarks />
-            </>
-        );
+        content = <HomeGrid />;
     } else {
         content =
             appState.guidedAnswerTreeSearchResult.resultSize === 0 ? (

diff --git a/packages/webapp/src/webview/ui/components/Bookmarks/Bookmarks.scss b/packages/webapp/src/webview/ui/components/Bookmarks/Bookmarks.scss
@@ -0,0 +1,40 @@
+.guided-answer__bookmark {
+    width: 100%;
+
+    .guided-answer__tree__ul {
+        width: 100%;
+
+        .guided-answer__tree__title {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+
+    &__button {
+        flex: 0 0 25px;
+        height: 25px;
+        opacity: 0;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            margin-top: 3px;
+        }
+
+        &:hover {
+            background: var(--vscode-menubar-selectionBackground);
+            outline: 1px solid var(--vscode-contrastActiveBorder);
+            border-radius: 3px;
+        }
+
+        &:focus-visible {
+            outline: 1px solid var(--vscode-focusBorder, #007fd4);
+            opacity: 1;
+        }
+    }
+
+    &:focus-visible &__button,
+    &:hover &__button {
+        opacity: 1;
+    }
+}
diff --git a/packages/webapp/src/webview/ui/components/Bookmarks/Bookmarks.tsx b/packages/webapp/src/webview/ui/components/Bookmarks/Bookmarks.tsx
@@ -1,50 +1,84 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
+import i18next from 'i18next';
 import type { AppState } from '../../../types';
 import { actions } from '../../../state';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
-import { VscStarFull } from 'react-icons/vsc';
+import { VscStarFull, VscStarEmpty } from 'react-icons/vsc';
 import { TreeItemBottomSection } from '../TreeItemBottomSection';
-import type { Bookmarks as BookmarksType } from '@sap/guided-answers-extension-types';
+import type { Bookmarks as BookmarksType, Bookmark } from '@sap/guided-answers-extension-types';
+import './Bookmarks.scss';
 
 /**
  * Shows list of bookmarks.
  *
  * @returns - react elements for bookmarks view
  */
 export function Bookmarks(): ReactElement {
-    const bookmarks = useSelector<AppState, BookmarksType>((state) => state.bookmarks);
+    const storedBookmarks = useSelector<AppState, BookmarksType>((state) => state.bookmarks);
+    const [localBookmarks] = useState<BookmarksType>(JSON.parse(JSON.stringify(storedBookmarks)));
+
+    const goToBookmark = (bookmark: Bookmark) => {
+        actions.setActiveTree(bookmark.tree);
+        bookmark.nodePath.forEach((node) => actions.updateActiveNode(node));
+        actions.synchronizeBookmark(bookmark);
+        document.body.focus();
+    };
+
+    const toggleBookmark = (e: React.MouseEvent, bookmark: Bookmark) => {
+        e.stopPropagation();
+        const bookmarkKey = `${bookmark.tree.TREE_ID}-${bookmark.nodePath.map((n) => n.NODE_ID).join(':')}`;
+        const newBookmarks: BookmarksType = JSON.parse(JSON.stringify(storedBookmarks));
+        if (newBookmarks[bookmarkKey]) {
+            delete newBookmarks[bookmarkKey];
+        } else {
+            newBookmarks[bookmarkKey] = {
+                tree: bookmark.tree,
+                nodePath: bookmark.nodePath,
+                createdAt: new Date().toISOString()
+            };
+        }
+        actions.updateBookmark({ bookmarkKey, bookmarks: newBookmarks });
+    };
 
     return (
         <div>
-            <h3>
-                <VscStarFull className="bookmark-icon-bookmarked" /> Bookmarks
+            <h3 style={{ display: 'flex', alignItems: 'center' }}>
+                <VscStarFull className="bookmark-icon-bookmarked" />
+                <span style={{ margin: '0 5px' }}>Bookmarks</span>
             </h3>
-            <FocusZone direction={FocusZoneDirection.bidirectional} isCircularNavigation={true}>
+            <FocusZone direction={FocusZoneDirection.vertical} isCircularNavigation={true}>
                 <ul className="striped-list-items" role="listbox">
-                    {Object.keys(bookmarks).map((bookmarkKey) => {
-                        const bookmark = bookmarks[bookmarkKey];
+                    {Object.keys(localBookmarks).map((bookmarkKey) => {
+                        const bookmark = localBookmarks[bookmarkKey];
+                        const bookmarkTitle =
+                            bookmark.nodePath.length > 1
+                                ? `${bookmark.tree.TITLE} - ${bookmark.nodePath[bookmark.nodePath.length - 1].TITLE}`
+                                : bookmark.tree.TITLE;
+                        const isBookmarked = !!storedBookmarks[bookmarkKey];
                         return (
-                            <li
-                                key={`tree-item-${bookmark.tree.TREE_ID}${bookmark.nodePath
-                                    .map((n) => n.NODE_ID)
-                                    .join('-')}`}
-                                className="tree-item"
-                                role="option">
+                            <li key={`tree-item-${bookmarkTitle}`} className="tree-item" role="option">
                                 <button
-                                    className="guided-answer__tree"
-                                    onClick={(): void => {
-                                        actions.setActiveTree(bookmark.tree);
-                                        bookmark.nodePath.forEach((node) => actions.updateActiveNode(node));
-                                        actions.synchronizeBookmark(bookmark);
-                                        document.body.focus();
-                                    }}>
+                                    className="guided-answer__tree guided-answer__bookmark"
+                                    id="goto-bookmark-button"
+                                    onClick={(): void => goToBookmark(bookmark)}>
                                     <div className="guided-answer__tree__ul">
                                         <h3 className="guided-answer__tree__title">
-                                            {bookmark.tree.TITLE}
-                                            {' - '}
-                                            {bookmark.nodePath[bookmark.nodePath.length - 1].TITLE}
+                                            <span>{bookmarkTitle}</span>
+                                            <button
+                                                className="guided-answer__bookmark__button"
+                                                id="bookmark-button"
+                                                onClick={(e) => toggleBookmark(e, bookmark)}>
+                                                {isBookmarked ? (
+                                                    <VscStarFull
+                                                        className="bookmark-icon-bookmarked"
+                                                        title={i18next.t('REMOVE_FROM_BOOKMARKS')}
+                                                    />
+                                                ) : (
+                                                    <VscStarEmpty title={i18next.t('BOOKMARK_THIS_GUIDE')} />
+                                                )}
+                                            </button>
                                         </h3>
                                         <TreeItemBottomSection tree={bookmark.tree} />
                                     </div>

diff --git a/packages/webapp/src/webview/ui/components/Header/Header.scss b/packages/webapp/src/webview/ui/components/Header/Header.scss
@@ -9,21 +9,25 @@
         position: sticky;
         top: 0;
         padding-bottom: 20px;
+
         &__sub {
             display: flex;
             align-items: center;
             width: 100%;
         }
+
         &__title {
             font-weight: 600;
             margin: 0;
             color: var(--vscode-settings-headerForeground);
             line-height: 29px;
         }
+
         &__subtitle {
             color: var(--vscode-editorCodeLens-foreground, #999);
             font-size: 2em;
         }
+
         &__navButtons {
             height: 25px;
             color: var(--vscode-foreground);
@@ -32,29 +36,36 @@
             cursor: pointer;
             background: none;
             border: 0;
+
             &__content {
                 vertical-align: middle;
                 display: inline-block;
+
                 &__text {
                     margin-left: 3px;
                 }
             }
+
             display: flex;
             align-items: center;
+
             svg {
                 width: 16px;
                 height: 16px;
                 min-width: 16px;
             }
         }
+
         &__navButtons:hover {
             background: var(--vscode-menubar-selectionBackground);
             outline: 1px solid var(--vscode-contrastActiveBorder);
             border-radius: 3px;
-            > span {
+
+            >span {
                 text-decoration: none;
             }
         }
+
         &__navButtons:focus-visible {
             outline: 1px solid var(--vscode-focusBorder, #007fd4);
         }
@@ -63,28 +74,33 @@
         &__spacer {
             flex: 1 0 120px;
         }
+
         &__back-restart-buttons {
             display: flex;
             justify-content: space-between;
             flex: 0 1 620px;
         }
+
         &__restart-feedback-buttons {
             display: flex;
         }
+
         &__divider {
             border-left: 1px solid var(--vscode-editorWidget-border);
             height: 16px;
             margin-top: 35px;
             margin-left: 10px;
             margin-right: 10px;
         }
+
         &__logoAndTitle {
             display: flex;
             align-items: center;
             margin-top: 30px;
             min-width: 280px;
             cursor: pointer;
         }
+
         &__searchField {
             display: flex;
             align-items: start;
@@ -97,6 +113,7 @@
                 width: 50%;
             }
         }
+
         &.vertical {
             justify-content: center;
 
@@ -141,6 +158,7 @@
         padding-left: 6px;
         font-size: 13px;
         display: inline-block;
+
         i {
             svg {
                 width: 14px;
@@ -248,27 +266,43 @@
                 margin-top: 20px;
                 align-items: start;
             }
+
             &__navButtons {
                 text-align: center;
                 justify-content: center;
             }
+
             &__navButtons__content {
                 margin-left: 0;
             }
+
             &__navButtons__content__text {
                 display: none;
             }
+
             &__homeButton,
             &__spacer {
                 flex: 0 0 34px;
             }
+
+            &.vertical {
+                .guided-answer__header__sub {
+                    width: 100%;
+                }
+
+                .guided-answer__header__searchField {
+                    width: 100%;
+                }
+            }
         }
     }
+
     .home-icon {
         width: 28px;
         border-radius: 3px;
         color: var(--vscode-menu-foreground, #cccccc);
     }
+
     .home-icon:hover {
         background: var(--vscode-menubar-selectionBackground);
     }

diff --git a/packages/webapp/src/webview/ui/components/HomeGrid/HomeGrid.scss b/packages/webapp/src/webview/ui/components/HomeGrid/HomeGrid.scss
@@ -5,10 +5,10 @@
 
     &__column {
         flex: 0 1 570px;
-    }
 
-    &__row {
-        margin-bottom: 50px;
+        >div {
+            margin-bottom: 30px;
+        }
     }
 }