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

* 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

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>
);
};
});