Merge branch 'feature/contextual-Tutorials' into develop

WorldBrain · Mar 2, 2024 · 6385474 · 6385474
2 parents aea1b6e + 1cd39d5
commit 6385474
Show file tree

Hide file tree

Showing 20 changed files with 583 additions and 118 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/annotations/components/AnnotationCreate.tsx b/src/annotations/components/AnnotationCreate.tsx
@@ -245,8 +245,11 @@ export class AnnotationCreate extends React.Component<Props, State>
         shouldShare: boolean,
         isProtected?: boolean,
     ) => {
-        if (this.state.isDeboucingEditor) {
-            await sleepPromise(250)
+        if (!this.editor?.checkIfHasContent()) {
+            return
+        }
+        while (this.state.isDeboucingEditor) {
+            await sleepPromise(50)
         }
         const saveP = this.props.onSave(shouldShare, isProtected)
         this.setState({ toggleShowTutorial: false, onEditClick: false })
@@ -407,7 +410,7 @@ export class AnnotationCreate extends React.Component<Props, State>
                             autoFocus={
                                 this.props.autoFocus || this.state.onEditClick
                             }
-                            placeholder={`Write a note...`}
+                            // placeholder={`Write a note...`}
                             isRibbonCommentBox={this.props.isRibbonCommentBox}
                             getYoutubePlayer={this.props.getYoutubePlayer}
                             sidebarEvents={this.props.sidebarEvents}

diff --git a/src/citations/PageCitations.tsx b/src/citations/PageCitations.tsx
@@ -16,6 +16,7 @@ import ShareAnnotationMenu from 'src/overview/sharing/components/ShareAnnotation
 import { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
 import { AnnotationSharingState } from 'src/content-sharing/background/types'
 import { PageAnnotationsCacheInterface } from 'src/annotations/cache/types'
+import TutorialBox from '@worldbrain/memex-common/lib/common-ui/components/tutorial-box'
 
 export interface Props {
     copyPasterProps: Omit<CopyPasterProps, 'renderTemplate' | 'renderPreview'>

diff --git a/src/common-ui/components/design-library/icons.tsx b/src/common-ui/components/design-library/icons.tsx
@@ -173,3 +173,6 @@ export const key = browser.runtime.getURL('/img/key.svg')
 export const spread = browser.runtime.getURL('/img/spread.svg')
 export const dragList = browser.runtime.getURL('/img/dragList.svg')
 export const memexIconOnly = browser.runtime.getURL('/img/memexIconOnly.svg')
+export const browserIcon = browser.runtime.getURL(
+    '/img/browserIcons/logo-48.png',
+)
diff --git a/src/copy-paster/components/TemplateEditor.tsx b/src/copy-paster/components/TemplateEditor.tsx
@@ -8,6 +8,7 @@ import { TooltipBox } from '@worldbrain/memex-common/lib/common-ui/components/to
 import { TaskState } from 'ui-logic-core/lib/types'
 import LoadingIndicator from '@worldbrain/memex-common/lib/common-ui/components/loading-indicator'
 import { PrimaryAction } from '@worldbrain/memex-common/lib/common-ui/components/PrimaryAction'
+import TutorialBox from '@worldbrain/memex-common/lib/common-ui/components/tutorial-box'
 
 interface TemplateEditorProps {
     previewString: string
@@ -227,6 +228,10 @@ export default class TemplateEditor extends PureComponent<
                             : 'Edit Template'}
                     </SectionTitle>
                     <ButtonBox>
+                        <TutorialBox
+                            tutorialId="useTemplates"
+                            getRootElement={this.props.getRootElement}
+                        />
                         {!this.props.isNew && !this.state.confirmDelete ? (
                             <PrimaryAction
                                 onClick={() =>

diff --git a/src/copy-paster/components/TemplateList.tsx b/src/copy-paster/components/TemplateList.tsx
@@ -14,6 +14,7 @@ import {
     OnDragEndResponder,
 } from 'react-beautiful-dnd'
 import { PrimaryAction } from '@worldbrain/memex-common/lib/common-ui/components/PrimaryAction'
+import TutorialBox from '@worldbrain/memex-common/lib/common-ui/components/tutorial-box'
 
 const Header = styled.div`
     display: flex;
@@ -243,7 +244,11 @@ export default class TemplateList extends PureComponent<TemplateListProps> {
                 <Header>
                     <SectionTitle>Templates</SectionTitle>
                     <ButtonBox>
-                        <Icon
+                        <TutorialBox
+                            getRootElement={this.props.getRootElement}
+                            tutorialId={'useTemplates'}
+                        />
+                        {/* <Icon
                             filePath={icons.helpIcon}
                             heightAndWidth="18px"
                             padding={'5px'}
@@ -252,7 +257,7 @@ export default class TemplateList extends PureComponent<TemplateListProps> {
                                     'https://links.memex.garden/tutorials/text-exporter',
                                 )
                             }
-                        />
+                        /> */}
 
                         <PrimaryAction
                             label={'New'}

diff --git a/src/custom-lists/ui/page-link-share-menu/index.tsx b/src/custom-lists/ui/page-link-share-menu/index.tsx
@@ -12,6 +12,7 @@ import SpaceEmailInvites from '../space-email-invites'
 import SpaceLinks from '../space-links'
 import { helpIcon } from 'src/common-ui/components/design-library/icons'
 import { TaskState } from 'ui-logic-core/lib/types'
+import TutorialBox from '@worldbrain/memex-common/lib/common-ui/components/tutorial-box'
 
 export interface Props extends Dependencies {
     showSpacesTab?: (pageUrl) => void
@@ -42,6 +43,20 @@ export default class PageLinkShareMenuContainer extends StatefulUIElement<
         }
     }
 
+    renderTutorialBox() {
+        if (this.state.showTutorial === false) {
+            return
+        }
+        return (
+            <TutorialBox
+                tutorialId={'sharePages'}
+                getRootElement={this.props.getRootElement}
+                onTutorialClose={() => this.processEvent('showTutorial', false)}
+                isHeadless={true}
+            />
+        )
+    }
+
     private renderMainContent() {
         if (this.state.loadState === 'running') {
             return (
@@ -79,6 +94,15 @@ export default class PageLinkShareMenuContainer extends StatefulUIElement<
                             software.
                         </Subtitle>
                     </TitleSection>
+                    <TutorialButtonContainer>
+                        <TutorialBox
+                            tutorialId={'sharePages'}
+                            getRootElement={this.props.getRootElement}
+                            onTutorialClose={() =>
+                                this.processEvent('showTutorial', false)
+                            }
+                        />
+                    </TutorialButtonContainer>
                 </ContextMenuContainer>
             )
         }
@@ -106,7 +130,14 @@ export default class PageLinkShareMenuContainer extends StatefulUIElement<
                                         icon={helpIcon}
                                         heightAndWidth={'16px'}
                                         hoverOff
+                                        onClick={() => {
+                                            this.processEvent(
+                                                'showTutorial',
+                                                true,
+                                            )
+                                        }}
                                     />
+                                    {this.renderTutorialBox()}
                                 </TooltipBox>
                             </SectionTitle>
                             <TooltipBox
@@ -303,6 +334,7 @@ const ContextMenuContainer = styled.div`
     width: fill-available;
     justify-content: center;
     align-items: center;
+    position: relative;
     /* width: 250px; */
 `
 
@@ -493,3 +525,9 @@ const BigNewButtonBox = styled.div`
     width: -moz-available;
     padding: 0 15px;
 `
+
+const TutorialButtonContainer = styled.div`
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+`
diff --git a/src/custom-lists/ui/page-link-share-menu/logic.ts b/src/custom-lists/ui/page-link-share-menu/logic.ts
@@ -41,6 +41,7 @@ export type Event = UIEvent<{
     createPageLink: null
     copyInviteLink: { link: string }
     reloadInviteLinks: { listData: UnifiedList<'page-link'> }
+    showTutorial: boolean
 }>
 
 export interface State {
@@ -50,6 +51,7 @@ export interface State {
     inviteLinksLoadState: TaskState
     inviteLinks: InviteLink[]
     selectedPageLinkList: UnifiedList<'page-link'> | null
+    showTutorial: boolean
 }
 
 type EventHandler<EventName extends keyof Event> = UIEventHandler<
@@ -72,6 +74,7 @@ export default class PageLinkShareMenu extends UILogic<State, Event> {
         inviteLinksLoadState: 'pristine',
         inviteLinks: [],
         selectedPageLinkList: null,
+        showTutorial: false,
     })
 
     private async ensureLoggedInUser(): Promise<AuthenticatedUser> {
@@ -195,6 +198,9 @@ export default class PageLinkShareMenu extends UILogic<State, Event> {
         })
     }
 
+    showTutorial: EventHandler<'showTutorial'> = async ({ event }) => {
+        this.emitMutation({ showTutorial: { $set: event } })
+    }
     createPageLink: EventHandler<'createPageLink'> = async ({}) => {
         await this._createPageLink()
     }

diff --git a/src/dashboard-refactor/header/search-bar/index.tsx b/src/dashboard-refactor/header/search-bar/index.tsx
@@ -213,11 +213,11 @@ const Input = styled.input`
     }
 
     &:focus {
-        outline: none;
+        outline: none !important;
     }
 
     &:focus ${SearchBarContainer} {
-        outline: 1px solid ${(props) => props.theme.colors.greyScale3};
+        outline: 1px solid ${(props) => props.theme.colors.greyScale3} !important;
     }
 `
 
@@ -231,6 +231,7 @@ const FilterButton = styled(Margin)`
 
 const FullWidthMargin = styled(Margin)`
     width: 100%;
+    height: fill-available;
 `
 
 const SearchIcon = styled.img`

diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
@@ -122,7 +122,6 @@ export class DashboardContainer extends StatefulUIElement<
         | 'openSpaceInWebUI'
         | 'summarizeBG'
         | 'imageSupportBG'
-        | 'getRootElement'
     > = {
         analytics,
         copyToClipboard,
@@ -154,7 +153,6 @@ export class DashboardContainer extends StatefulUIElement<
         openSpaceInWebUI: (remoteListId) =>
             window.open(getListShareUrl({ remoteListId }), '_blank'),
         imageSupportBG: runInBackground(),
-        getRootElement: () => document.getElementById('body'),
     }
 
     private notesSidebarRef = React.createRef<NotesSidebarContainer>()
@@ -696,6 +694,7 @@ export class DashboardContainer extends StatefulUIElement<
                         this.processEvent('setLocalListsExpanded', {
                             isExpanded: !listsSidebar.areLocalListsExpanded,
                         }),
+                    getRootElement: this.props.getRootElement,
                 }}
                 followedListsGroup={{
                     isExpanded: listsSidebar.areFollowedListsExpanded,
@@ -708,6 +707,7 @@ export class DashboardContainer extends StatefulUIElement<
                         this.processEvent('setFollowedListsExpanded', {
                             isExpanded: !listsSidebar.areFollowedListsExpanded,
                         }),
+                    getRootElement: this.props.getRootElement,
                 }}
                 joinedListsGroup={{
                     isExpanded: listsSidebar.areJoinedListsExpanded,
@@ -721,6 +721,7 @@ export class DashboardContainer extends StatefulUIElement<
                         })
                     },
                     listData: joinedListsData,
+                    getRootElement: this.props.getRootElement,
                 }}
                 currentUser={this.state.currentUser}
                 initContextMenuBtnProps={(listId) => ({

diff --git a/src/dashboard-refactor/lists-sidebar/components/sidebar-group.tsx b/src/dashboard-refactor/lists-sidebar/components/sidebar-group.tsx
@@ -5,6 +5,7 @@ import { fonts } from 'src/dashboard-refactor/styles'
 import LoadingIndicator from '@worldbrain/memex-common/lib/common-ui/components/loading-indicator'
 import Icon from '@worldbrain/memex-common/lib/common-ui/components/icon'
 import type { TaskState } from 'ui-logic-core/lib/types'
+import TutorialBox from '@worldbrain/memex-common/lib/common-ui/components/tutorial-box'
 
 export interface Props {
     title: string
@@ -14,6 +15,7 @@ export interface Props {
     onAddBtnClick?: React.MouseEventHandler
     onExpandBtnClick: React.MouseEventHandler
     spaceSidebarWidth: string
+    getRootElement: () => HTMLElement
 }
 
 export default class ListsSidebarGroup extends PureComponent<Props> {
@@ -65,13 +67,22 @@ export default class ListsSidebarGroup extends PureComponent<Props> {
                             {this.props.title}
                             <IconGroup>
                                 {this.props.onAddBtnClick && (
-                                    <Icon
-                                        icon="plus"
-                                        heightAndWidth="16px"
-                                        color={'prime1'}
-                                        padding={'4px'}
-                                        onClick={this.props.onAddBtnClick}
-                                    />
+                                    <>
+                                        <TutorialBox
+                                            getRootElement={
+                                                this.props.getRootElement
+                                            }
+                                            tutorialId="organiseSpaces"
+                                            iconSize="18px"
+                                        />
+                                        <Icon
+                                            icon="plus"
+                                            heightAndWidth="16px"
+                                            color={'prime1'}
+                                            padding={'4px'}
+                                            onClick={this.props.onAddBtnClick}
+                                        />
+                                    </>
                                 )}
                                 {this.props.loadingState === 'success' && (
                                     <Counter>{this.props.listsCount}</Counter>

diff --git a/src/dashboard-refactor/lists-sidebar/index.tsx b/src/dashboard-refactor/lists-sidebar/index.tsx
@@ -566,6 +566,7 @@ export default class ListsSidebar extends PureComponent<ListsSidebarProps> {
                         {...this.props.ownListsGroup}
                         listsCount={this.props.ownListsGroup.listData.length}
                         spaceSidebarWidth={this.props.spaceSidebarWidth}
+                        getRootElement={this.props.getRootElement}
                     >
                         {this.props.isAddListInputShown && (
                             <SidebarItemInput