From 3c0bc79768e355335896033268ba4bb5ff1d189f Mon Sep 17 00:00:00 2001 From: Laurent Senta Date: Tue, 1 Feb 2022 02:18:14 +0100 Subject: [PATCH] feat: add migration pref pane (#825) * feat: add migration pane * style: clean imports * removeme: beta version * fix: do no show dropzone when tag has no parent * fix: hide the Folders toggle * fix: hide migrations option when user has no folders * fix: add delimiter on Folders mark * removeme: bump beta * fix: remove component viewer for tag folders * removeme: bump beta * chore(deps): snjs --- .../javascripts/components/Navigation.tsx | 64 ++++------- .../QuickSettingsMenu/QuickSettingsMenu.tsx | 10 +- .../components/Tags/RootTagDropZone.tsx | 9 +- .../components/Tags/TagsSectionTitle.tsx | 2 +- .../javascripts/components/menu/MenuItem.tsx | 41 ++++--- .../preferences/components/MenuItem.tsx | 4 +- .../javascripts/preferences/panes/General.tsx | 16 +-- .../panes/general-segments/Migrations.tsx | 103 ++++++++++++++++++ .../ui_models/app_state/app_state.ts | 62 +---------- .../ui_models/app_state/tags_state.ts | 5 + package.json | 2 +- yarn.lock | 8 +- 12 files changed, 181 insertions(+), 145 deletions(-) create mode 100644 app/assets/javascripts/preferences/panes/general-segments/Migrations.tsx diff --git a/app/assets/javascripts/components/Navigation.tsx b/app/assets/javascripts/components/Navigation.tsx index dbf4e027b..3d9eb0691 100644 --- a/app/assets/javascripts/components/Navigation.tsx +++ b/app/assets/javascripts/components/Navigation.tsx @@ -1,4 +1,3 @@ -import { ComponentView } from '@/components/ComponentView'; import { SmartTagsSection } from '@/components/Tags/SmartTagsSection'; import { TagsSection } from '@/components/Tags/TagsSection'; import { WebApplication } from '@/ui_models/application'; @@ -6,13 +5,7 @@ import { PANEL_NAME_NAVIGATION } from '@/views/constants'; import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'; import { observer } from 'mobx-react-lite'; import { FunctionComponent } from 'preact'; -import { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'preact/hooks'; +import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'; import { PremiumModalProvider } from './Premium'; import { PanelSide, @@ -28,7 +21,6 @@ type Props = { export const Navigation: FunctionComponent = observer( ({ application }) => { const appState = useMemo(() => application.getAppState(), [application]); - const componentViewer = appState.foldersComponentViewer; const enableNativeSmartTagsFeature = appState.features.enableNativeSmartTagsFeature; const [ref, setRef] = useState(); @@ -72,42 +64,30 @@ export const Navigation: FunctionComponent = observer( data-aria-label="Navigation" ref={setRef} > - {componentViewer ? ( -
-
- -
-
- ) : ( -
-
-
-
- Views -
- {!enableNativeSmartTagsFeature && ( -
-
- -
-
- )} +
+
+
+
+ Views
-
-
- - + {!enableNativeSmartTagsFeature && ( +
+
+ +
+
+ )}
- )} +
+ + +
+
{ref && ( = observer( const reloadToggleableComponents = useCallback(() => { const toggleableComponents = ( application.getDisplayableItems(ContentType.Component) as SNComponent[] - ).filter((component) => - [ComponentArea.EditorStack, ComponentArea.TagsList].includes( - component.area - ) + ).filter( + (component) => + [ComponentArea.EditorStack, ComponentArea.TagsList].includes( + component.area + ) && component.identifier !== FeatureIdentifier.FoldersComponent ); setToggleableComponents(toggleableComponents); }, [application]); diff --git a/app/assets/javascripts/components/Tags/RootTagDropZone.tsx b/app/assets/javascripts/components/Tags/RootTagDropZone.tsx index 10dcf0dfa..1eb7ab919 100644 --- a/app/assets/javascripts/components/Tags/RootTagDropZone.tsx +++ b/app/assets/javascripts/components/Tags/RootTagDropZone.tsx @@ -1,9 +1,6 @@ import { Icon } from '@/components/Icon'; import { usePremiumModal } from '@/components/Premium'; -import { - FeaturesState, - TAG_FOLDERS_FEATURE_NAME, -} from '@/ui_models/app_state/features_state'; +import { FeaturesState } from '@/ui_models/app_state/features_state'; import { TagsState } from '@/ui_models/app_state/tags_state'; import { observer } from 'mobx-react-lite'; import { useDrop } from 'react-dnd'; @@ -22,8 +19,8 @@ export const RootTagDropZone: React.FC = observer( const [{ isOver, canDrop }, dropRef] = useDrop( () => ({ accept: ItemTypes.TAG, - canDrop: () => { - return true; + canDrop: (item) => { + return tagsState.hasParent(item.uuid); }, drop: (item) => { tagsState.assignParent(item.uuid, undefined); diff --git a/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx b/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx index 6298dbf1e..e4b841e4b 100644 --- a/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx +++ b/app/assets/javascripts/components/Tags/TagsSectionTitle.tsx @@ -52,7 +52,7 @@ export const TagsSectionTitle: FunctionComponent = observer( className="ml-1 sk-bold color-grey-2 cursor-pointer" onClick={showPremiumAlert} > - Folders + · Folders
diff --git a/app/assets/javascripts/components/menu/MenuItem.tsx b/app/assets/javascripts/components/menu/MenuItem.tsx index 726c898cf..c5643f1f6 100644 --- a/app/assets/javascripts/components/menu/MenuItem.tsx +++ b/app/assets/javascripts/components/menu/MenuItem.tsx @@ -91,22 +91,27 @@ type ListElementProps = { }; export const MenuItemListElement: FunctionComponent = - forwardRef(({ children, isFirstMenuItem }: ListElementProps, ref: Ref) => { - const child = children as VNode; + forwardRef( + ( + { children, isFirstMenuItem }: ListElementProps, + ref: Ref + ) => { + const child = children as VNode; - return ( -
  • - {{ - ...child, - props: { - ...(child.props ? { ...child.props } : {}), - ...(child.type === MenuItem - ? { - tabIndex: isFirstMenuItem ? 0 : -1, - } - : {}), - }, - }} -
    • - ); - }); + return ( +
  • + {{ + ...child, + props: { + ...(child.props ? { ...child.props } : {}), + ...(child.type === MenuItem + ? { + tabIndex: isFirstMenuItem ? 0 : -1, + } + : {}), + }, + }} +
    • + ); + } + ); diff --git a/app/assets/javascripts/preferences/components/MenuItem.tsx b/app/assets/javascripts/preferences/components/MenuItem.tsx index 900ed8304..f13a27866 100644 --- a/app/assets/javascripts/preferences/components/MenuItem.tsx +++ b/app/assets/javascripts/preferences/components/MenuItem.tsx @@ -16,7 +16,9 @@ export const MenuItem: FunctionComponent = ({ onClick, }) => (
    { e.preventDefault(); onClick(); diff --git a/app/assets/javascripts/preferences/panes/General.tsx b/app/assets/javascripts/preferences/panes/General.tsx index 0175da19a..aacc4a1db 100644 --- a/app/assets/javascripts/preferences/panes/General.tsx +++ b/app/assets/javascripts/preferences/panes/General.tsx @@ -6,24 +6,26 @@ import { ErrorReporting, Tools, Defaults } from './general-segments'; import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments'; import { Advanced } from '@/preferences/panes/account'; import { observer } from 'mobx-react-lite'; +import { Migrations } from './general-segments/Migrations'; interface GeneralProps { appState: AppState; application: WebApplication; - extensionsLatestVersions: ExtensionsLatestVersions, + extensionsLatestVersions: ExtensionsLatestVersions; } export const General: FunctionComponent = observer( - ({ - appState, - application, - extensionsLatestVersions - }) => ( + ({ appState, application, extensionsLatestVersions }) => ( - + + ) ); diff --git a/app/assets/javascripts/preferences/panes/general-segments/Migrations.tsx b/app/assets/javascripts/preferences/panes/general-segments/Migrations.tsx new file mode 100644 index 000000000..7353f817a --- /dev/null +++ b/app/assets/javascripts/preferences/panes/general-segments/Migrations.tsx @@ -0,0 +1,103 @@ +import { Button } from '@/components/Button'; +import { Icon } from '@/components/Icon'; +import { WebApplication } from '@/ui_models/application'; +import { AppState } from '@/ui_models/app_state'; +import { FunctionComponent } from 'preact'; +import { useCallback, useState } from 'preact/hooks'; +import { + PreferencesGroup, + PreferencesSegment, + Subtitle, + Text, + Title, +} from '../../components'; + +type Props = { + application: WebApplication; + appState: AppState; +}; + +export const CheckIcon: React.FC = () => { + return ; +}; + +const Migration3dot0dot0: FunctionComponent = ({ application }) => { + const [loading, setLoading] = useState(false); + const [complete, setComplete] = useState(false); + const [error, setError] = useState(null); + + const trigger = useCallback(() => { + setLoading(true); + setError(null); + setComplete(false); + application + .migrateTagDotsToHierarchy() + .then(() => { + setLoading(false); + setError(null); + setComplete(true); + }) + .catch((error: unknown) => { + setLoading(false); + setError(error); + setComplete(false); + }); + }, [application, setLoading, setError]); + + return ( + <> + (3.0.0) Folders Component to Native Folders + + This migration transform tags with "." in their title into a hierarchy + of parents. This lets your transform tag hierarchies created with the + folder component into native tag folders. + +
    +
    + + ); +}; + +export const Migrations: FunctionComponent = ({ + application, + appState, +}) => { + const hasNativeFoldersEnabled = appState.features.enableNativeFoldersFeature; + + if (!hasNativeFoldersEnabled) { + return null; + } + + const hasFoldersFeature = appState.features.hasFolders; + + if (!hasFoldersFeature) { + return null; + } + + return ( + + + Migrations +
    + + + + ); +}; diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts index d59501d21..fd15283ef 100644 --- a/app/assets/javascripts/ui_models/app_state/app_state.ts +++ b/app/assets/javascripts/ui_models/app_state/app_state.ts @@ -5,18 +5,14 @@ import { AccountMenuState } from '@/ui_models/app_state/account_menu_state'; import { isDesktopApplication } from '@/utils'; import { ApplicationEvent, - ComponentArea, ContentType, DeinitSource, - isPayloadSourceInternalChange, + NoteViewController, PayloadSource, PrefKey, - SNComponent, SNNote, SNSmartTag, - ComponentViewer, SNTag, - NoteViewController, } from '@standardnotes/snjs'; import pull from 'lodash/pull'; import { @@ -91,14 +87,11 @@ export class AppState { readonly tags: TagsState; readonly notesView: NotesViewState; - public foldersComponentViewer?: ComponentViewer; - isSessionsModalVisible = false; private appEventObserverRemovers: (() => void)[] = []; private readonly tagChangedDisposer: IReactionDisposer; - private readonly foldersComponentViewerDisposer: () => void; /* @ngInject */ constructor(application: WebApplication, private bridge: Bridge) { @@ -157,8 +150,6 @@ export class AppState { this.showBetaWarning = false; } - this.foldersComponentViewer = undefined; - makeObservable(this, { selectedTag: computed, @@ -170,14 +161,9 @@ export class AppState { disableBetaWarning: action, openSessionsModal: action, closeSessionsModal: action, - - foldersComponentViewer: observable.ref, - setFoldersComponent: action, }); this.tagChangedDisposer = this.tagChangedNotifier(); - this.foldersComponentViewerDisposer = - this.subscribeToFoldersComponentChanges(); } deinit(source: DeinitSource): void { @@ -197,7 +183,6 @@ export class AppState { document.removeEventListener('visibilitychange', this.onVisibilityChange); this.onVisibilityChange = undefined; this.tagChangedDisposer(); - this.foldersComponentViewerDisposer(); } openSessionsModal(): void { @@ -302,51 +287,6 @@ export class AppState { ); } - setFoldersComponent(component?: SNComponent) { - const foldersComponentViewer = this.foldersComponentViewer; - - if (foldersComponentViewer) { - this.application.componentManager.destroyComponentViewer( - foldersComponentViewer - ); - this.foldersComponentViewer = undefined; - } - - if (component) { - this.foldersComponentViewer = - this.application.componentManager.createComponentViewer( - component, - undefined, - this.tags.onFoldersComponentMessage.bind(this.tags) - ); - } - } - - private subscribeToFoldersComponentChanges() { - return this.application.streamItems( - [ContentType.Component], - async (items, source) => { - if ( - isPayloadSourceInternalChange(source) || - source === PayloadSource.InitialObserverRegistrationPush - ) { - return; - } - const components = items as SNComponent[]; - const hasFoldersChange = !!components.find( - (component) => component.area === ComponentArea.TagsList - ); - if (hasFoldersChange) { - const componentViewer = this.application.componentManager - .componentsForArea(ComponentArea.TagsList) - .find((component) => component.active); - - this.setFoldersComponent(componentViewer); - } - } - ); - } - public get selectedTag(): SNTag | SNSmartTag | undefined { return this.tags.selected; } diff --git a/app/assets/javascripts/ui_models/app_state/tags_state.ts b/app/assets/javascripts/ui_models/app_state/tags_state.ts index 3e075c3e2..e5c31efb1 100644 --- a/app/assets/javascripts/ui_models/app_state/tags_state.ts +++ b/app/assets/javascripts/ui_models/app_state/tags_state.ts @@ -195,6 +195,11 @@ export class TagsState { return this.application.isValidTagParent(parentUuid, tagUuid); } + public hasParent(tagUuid: UuidString): boolean { + const item = this.application.findItem(tagUuid); + return !!item && !!(item as SNTag).parentId; + } + public async assignParent( tagUuid: string, futureParentUuid: string | undefined diff --git a/package.json b/package.json index c06e5230d..ac0bbe118 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "@reach/tooltip": "^0.16.2", "@standardnotes/components": "1.4.4", "@standardnotes/features": "1.26.1", - "@standardnotes/snjs": "2.45.0", + "@standardnotes/snjs": "2.46.0", "@standardnotes/settings": "^1.10.0", "@standardnotes/sncrypto-web": "1.6.0", "mobx": "^6.3.5", diff --git a/yarn.lock b/yarn.lock index 811745775..07f29e1c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2655,10 +2655,10 @@ buffer "^6.0.3" libsodium-wrappers "^0.7.9" -"@standardnotes/snjs@2.45.0": - version "2.45.0" - resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.45.0.tgz#d123434b959d279af2ffe00acf2e9e6784cf497c" - integrity sha512-gTlOG3wd4zYaBeReypQiz+ASEnVCKaB8kWtKF61nkV9j3vFgYh3krsvdhOi6lMXBk+CijEefeLhrmooOtv08Xg== +"@standardnotes/snjs@2.46.0": + version "2.46.0" + resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.46.0.tgz#7e4242df8cd0408fde243e1048536fa19ea6c5d9" + integrity sha512-lKCW6/Q3HaDdaI6VJ31m6GyIy6TgHyGesdUQzbMFtZPEhHDjySqFCyIaQy0ZVdAMB7X/HFxREtxwAwG5wfVVvw== dependencies: "@standardnotes/auth" "^3.15.3" "@standardnotes/common" "^1.8.0"