rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(preferences): extension modals into extension panes (#683)

Browse Source 
* feat(preferences): show inline extensions in extensions pane

* wip

* wip

* refactor: convert ComponentView to React component

* refactor: convert ComponentView to React component

* chore: fix merge conflicts

* feat: don't show features whose `area` is "room", update modal items' icons in Preferences menu

* chore: fix TS error

* feat: don't show 2FA Manager in modal-based component

* feat: remove `ExtendedDataReloadComplete` event, since Extensions Manger is being removed from the app

* chore: avoid hardcoded values in svg image, optimize `if` condition

* chore: remove remnant comment

* fix: fix typescript errors

Co-authored-by: vardanhakobyan <vardan_live@live.com>
This commit is contained in:
Gorjan Petrovski
2021-10-25 10:45:36 +02:00
committed by GitHub
parent 82fc103a3e
commit 31222e1236
29 changed files with 993 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/javascripts/preferences/panes/ExtensionPane.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { PreferencesGroup, PreferencesSegment } from "@/preferences/components";
import { WebApplication } from "@/ui_models/application";
import { SNComponent } from "@standardnotes/snjs/dist/@types";
import { observer } from "mobx-react-lite";
import { FunctionComponent } from "preact";
import { ExtensionItem } from "./extensions-segments";
import { ComponentView } from '@/components/ComponentView';
import { AppState } from '@/ui_models/app_state';
import { PreferencesMenu } from '@/preferences/PreferencesMenu';
interface IProps {
application: WebApplication;
appState: AppState;
extension: SNComponent;
preferencesMenu: PreferencesMenu;
}
export const ExtensionPane: FunctionComponent<IProps> = observer(
({ extension, application, appState, preferencesMenu }) => {
const latestVersion = preferencesMenu.extensionsLatestVersions.getVersion(extension);
return (
<div className="preferences-extension-pane color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="flex-grow flex flex-col py-6 items-center">
<div className="w-200 max-w-200 flex flex-col">
<PreferencesGroup>
<ExtensionItem
application={application}
extension={extension}
first={false}
uninstall={() => application.deleteItem(extension).then(() => preferencesMenu.loadExtensionsPanes())}
toggleActivate={() => application.toggleComponent(extension).then(() => preferencesMenu.loadExtensionsPanes())}
latestVersion={latestVersion}
/>
<PreferencesSegment>
<ComponentView
application={application}
appState={appState}
componentUuid={extension.uuid}
/>
</PreferencesSegment>
</PreferencesGroup>
</div>
</div>
</div>
);
});

35
app/assets/javascripts/preferences/panes/Extensions.tsx
View File

@@ -9,9 +9,9 @@ import {
PreferencesPane,
PreferencesSegment,
} from '../components';
import { ConfirmCustomExtension, ExtensionItem } from './extensions-segments';
import { ConfirmCustomExtension, ExtensionItem, ExtensionsLatestVersions } from './extensions-segments';
import { useEffect, useRef, useState } from 'preact/hooks';
import { FeatureDescription } from '@standardnotes/features';
import { observer } from 'mobx-react-lite';
const loadExtensions = (application: WebApplication) => application.getItems([
ContentType.ActionsExtension,
@@ -19,30 +19,14 @@ const loadExtensions = (application: WebApplication) => application.getItems([
ContentType.Theme,
]) as SNComponent[];
function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
if (features == undefined) return;
for (const feature of features) {
versionMap.set(feature.identifier, feature.version);
}
}
const loadLatestVersions = (application: WebApplication) => application.getAvailableSubscriptions()
.then(subscriptions => {
const versionMap: Map<string, string> = new Map();
collectFeatures(subscriptions?.CORE_PLAN?.features, versionMap);
collectFeatures(subscriptions?.PLUS_PLAN?.features, versionMap);
collectFeatures(subscriptions?.PRO_PLAN?.features, versionMap);
return versionMap;
});
export const Extensions: FunctionComponent<{
application: WebApplication
}> = ({ application }) => {
extensionsLatestVersions: ExtensionsLatestVersions,
}> = observer(({ application, extensionsLatestVersions }) => {
const [customUrl, setCustomUrl] = useState('');
const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
const [extensions, setExtensions] = useState(loadExtensions(application));
const [latestVersions, setLatestVersions] = useState<Map<string, string> | undefined>(undefined);
const confirmableEnd = useRef<HTMLDivElement>(null);
@@ -52,12 +36,6 @@ export const Extensions: FunctionComponent<{
}
}, [confirmableExtension, confirmableEnd]);
useEffect(() => {
if (!latestVersions) {
loadLatestVersions(application).then(versions => setLatestVersions(versions));
}
}, [latestVersions, application]);
const uninstallExtension = async (extension: SNComponent) => {
await application.deleteItem(extension);
setExtensions(loadExtensions(application));
@@ -94,12 +72,13 @@ export const Extensions: FunctionComponent<{
<PreferencesGroup>
{
extensions
.filter(extension => !['modal', 'rooms'].includes(extension.area))
.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
.map((extension, i) => (
<ExtensionItem
application={application}
extension={extension}
latestVersion={latestVersions?.get(extension.package_info.identifier)}
latestVersion={extensionsLatestVersions.getVersion(extension)}
first={i === 0}
uninstall={uninstallExtension}
toggleActivate={toggleActivateExtension} />
@@ -140,4 +119,4 @@ export const Extensions: FunctionComponent<{
</PreferencesGroup>
</PreferencesPane>
);
};
});

244
app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
View File

@@ -6,6 +6,7 @@ import { Switch } from "@/components/Switch";
import { WebApplication } from "@/ui_models/application";
import { useEffect, useRef, useState } from "preact/hooks";
import { Button } from "@/components/Button";
import { RenameExtension } from "./RenameExtension";
const ExtensionVersions: FunctionComponent<{
installedVersion: string,
@@ -37,161 +38,108 @@ const UseHosted: FunctionComponent<{
</div>
);
const RenameExtension: FunctionComponent<{
extensionName: string, changeName: (newName: string) => void
}> = ({ extensionName, changeName }) => {
const [isRenaming, setIsRenaming] = useState(false);
const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isRenaming) {
inputRef.current!.focus();
}
}, [inputRef, isRenaming]);
const startRenaming = () => {
setNewExtensionName(extensionName);
setIsRenaming(true);
};
const cancelRename = () => {
setNewExtensionName(extensionName);
setIsRenaming(false);
};
const confirmRename = () => {
if (newExtensionName == undefined || newExtensionName === '') {
return;
}
changeName(newExtensionName);
setIsRenaming(false);
};
return (
<div className="flex flex-row mr-3 items-center">
<input
ref={inputRef}
disabled={!isRenaming}
autocomplete='off'
className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
type="text"
value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
/>
<div className="min-w-3" />
{isRenaming ?
<>
<a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
<div className="min-w-3" />
<a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
</> :
<a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
}
</div>
);
};
export const ExtensionItem: FunctionComponent<{
export interface ExtensionItemProps {
application: WebApplication,
extension: SNComponent,
first: boolean,
latestVersion: string | undefined,
uninstall: (extension: SNComponent) => void,
toggleActivate: (extension: SNComponent) => void,
}> = ({ application, extension, first, uninstall, toggleActivate, latestVersion }) => {
toggleActivate?: (extension: SNComponent) => void,
}
export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
({ application, extension, first, uninstall, toggleActivate, latestVersion }) => {
const [autoupdateDisabled, setAutoupdateDisabled] = useState(extension.autoupdateDisabled ?? false);
const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false);
const [extensionName, setExtensionName] = useState(extension.name);
const toggleAutoupdate = () => {
const newAutoupdateValue = !autoupdateDisabled;
setAutoupdateDisabled(newAutoupdateValue);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.autoupdateDisabled = newAutoupdateValue;
})
.then((item) => {
const component = (item as SNComponent);
setAutoupdateDisabled(component.autoupdateDisabled);
})
.catch(e => {
console.error(e);
});
const toggleAutoupdate = () => {
const newAutoupdateValue = !autoupdateDisabled;
setAutoupdateDisabled(newAutoupdateValue);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.autoupdateDisabled = newAutoupdateValue;
})
.then((item) => {
const component = (item as SNComponent);
setAutoupdateDisabled(component.autoupdateDisabled);
})
.catch(e => {
console.error(e);
});
};
const toggleOffllineOnly = () => {
const newOfflineOnly = !offlineOnly;
setOfflineOnly(newOfflineOnly);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.offlineOnly = newOfflineOnly;
})
.then((item) => {
const component = (item as SNComponent);
setOfflineOnly(component.offlineOnly);
})
.catch(e => {
console.error(e);
});
};
const changeExtensionName = (newName: string) => {
setExtensionName(newName);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.name = newName;
})
.then((item) => {
const component = (item as SNComponent);
setExtensionName(component.name);
});
};
const localInstallable = extension.package_info.download_url;
const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
const installedVersion = extension.package_info.version;
const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
return (
<PreferencesSegment>
{first && <>
<Title>Extensions</Title>
<div className="w-full min-h-3" />
</>}
<RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
<div className="min-h-2" />
<ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
{localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
{localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{isEditorOrTags || isExternal &&
<>
<div className="min-h-2" />
<div className="flex flex-row">
{isEditorOrTags && toggleActivate != undefined && (
<>
{extension.active ?
<Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
<Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} />
}
<div className="min-w-3" />
</>
)}
{isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
</div>
</>
}
</PreferencesSegment >
);
};
const toggleOffllineOnly = () => {
const newOfflineOnly = !offlineOnly;
setOfflineOnly(newOfflineOnly);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.offlineOnly = newOfflineOnly;
})
.then((item) => {
const component = (item as SNComponent);
setOfflineOnly(component.offlineOnly);
})
.catch(e => {
console.error(e);
});
};
const changeExtensionName = (newName: string) => {
setExtensionName(newName);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.name = newName;
})
.then((item) => {
const component = (item as SNComponent);
setExtensionName(component.name);
});
};
const localInstallable = extension.package_info.download_url;
const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
const installedVersion = extension.package_info.version;
const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
return (
<PreferencesSegment>
{first && <>
<Title>Extensions</Title>
<div className="w-full min-h-3" />
</>}
<RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
<div className="min-h-2" />
<ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
{localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
{localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{isEditorOrTags || isExternal &&
<>
<div className="min-h-2" />
<div className="flex flex-row">
{isEditorOrTags && (
<>
{extension.active ?
<Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
<Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} />
}
<div className="min-w-3" />
</>
)}
{isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
</div>
</>
}
</PreferencesSegment >
);
};

35
app/assets/javascripts/preferences/panes/extensions-segments/ExtensionsLatestVersions.ts Normal file
View File

@@ -0,0 +1,35 @@
import { WebApplication } from "@/ui_models/application";
import { FeatureDescription } from "@standardnotes/features";
import { SNComponent } from "@standardnotes/snjs/dist/@types";
import { makeAutoObservable, observable } from "mobx";
export class ExtensionsLatestVersions {
static async load(application: WebApplication): Promise<ExtensionsLatestVersions> {
const map = await application.getAvailableSubscriptions()
.then(subscriptions => {
const versionMap: Map<string, string> = new Map();
collectFeatures(subscriptions?.CORE_PLAN?.features as FeatureDescription[], versionMap);
collectFeatures(subscriptions?.PLUS_PLAN?.features as FeatureDescription[], versionMap);
collectFeatures(subscriptions?.PRO_PLAN?.features as FeatureDescription[], versionMap);
return versionMap;
});
return new ExtensionsLatestVersions(map);
}
constructor(private readonly latestVersionsMap: Map<string, string>) {
makeAutoObservable<ExtensionsLatestVersions, 'latestVersionsMap'>(
this, { latestVersionsMap: observable.ref });
}
getVersion(extension: SNComponent): string | undefined {
return this.latestVersionsMap.get(extension.package_info.identifier);
}
}
function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
if (features == undefined) return;
for (const feature of features) {
versionMap.set(feature.identifier, feature.version);
}
}

58
app/assets/javascripts/preferences/panes/extensions-segments/RenameExtension.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { FunctionComponent } from "preact";
import { useState, useRef, useEffect } from "preact/hooks";
export const RenameExtension: FunctionComponent<{
extensionName: string, changeName: (newName: string) => void
}> = ({ extensionName, changeName }) => {
const [isRenaming, setIsRenaming] = useState(false);
const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isRenaming) {
inputRef.current!.focus();
}
}, [inputRef, isRenaming]);
const startRenaming = () => {
setNewExtensionName(extensionName);
setIsRenaming(true);
};
const cancelRename = () => {
setNewExtensionName(extensionName);
setIsRenaming(false);
};
const confirmRename = () => {
if (!newExtensionName) {
return;
}
changeName(newExtensionName);
setIsRenaming(false);
};
return (
<div className="flex flex-row mr-3 items-center">
<input
ref={inputRef}
disabled={!isRenaming}
autocomplete='off'
className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
type="text"
value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
/>
<div className="min-w-3" />
{isRenaming ?
<>
<a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
<div className="min-w-3" />
<a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
</> :
<a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
}
</div>
);
};

1
app/assets/javascripts/preferences/panes/extensions-segments/index.ts
View File

@@ -1,2 +1,3 @@
export * from './ConfirmCustomExtension';
export * from './ExtensionItem';
export * from './ExtensionsLatestVersions';