feat: extension manager in preferences (#670)

* feat: add extensions pane * fix: rename extensions folder for MacOS compatibility * feat: extension toggles and uninstall * feat: implement extension renaming, activation, deactivation and UI/UX fixes * feat(preferences): improve extension item design * feat(preferences): hide custom extension input when installation confirmed
2021-10-08 09:20:46 +02:00
parent 92699d23f4
commit 7b6c99d188
6 changed files with 395 additions and 1 deletions
--- a/app/assets/javascripts/preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -0,0 +1,112 @@
+import { ContentType, SNComponent } from '@standardnotes/snjs';
+import { Button } from '@/components/Button';
+import { DecoratedInput } from '@/components/DecoratedInput';
+import { WebApplication } from '@/ui_models/application';
+import { FunctionComponent } from 'preact';
+import {
+  Title,
+  PreferencesGroup,
+  PreferencesPane,
+  PreferencesSegment,
+} from '../components';
+import { ConfirmCustomExtension, ExtensionItem } from './extensions-segments';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+const loadExtensions = (application: WebApplication) => application.getItems([
+  ContentType.ActionsExtension,
+  ContentType.Component,
+  ContentType.Theme,
+]) as SNComponent[];
+
+export const Extensions: FunctionComponent<{
+  application: WebApplication
+}> = ({ application }) => {
+
+  const [customUrl, setCustomUrl] = useState('');
+  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
+  const [extensions, setExtensions] = useState(loadExtensions(application));
+
+  const confirmableEnd = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (confirmableExtension) {
+      confirmableEnd.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [confirmableExtension, confirmableEnd]);
+
+  const uninstallExtension = async (extension: SNComponent) => {
+    await application.deleteItem(extension);
+    setExtensions(loadExtensions(application));
+  };
+
+  const submitExtensionUrl = async (url: string) => {
+    const component = await application.downloadExternalFeature(url);
+    if (component) {
+      setConfirmableExtension(component);
+    }
+  };
+
+  const handleConfirmExtensionSubmit = async (confirm: boolean) => {
+    if (confirm) {
+      confirmExtension();
+    }
+    setConfirmableExtension(undefined);
+    setCustomUrl('');
+  };
+
+  const confirmExtension = async () => {
+    await application.insertItem(confirmableExtension as SNComponent);
+    setExtensions(loadExtensions(application));
+  };
+
+  const toggleActivateExtension = (extension: SNComponent) => {
+    application.toggleComponent(extension);
+    setExtensions(loadExtensions(application));
+  };
+
+  return (
+    <PreferencesPane>
+      <PreferencesGroup>
+        {
+          extensions
+            .filter(extension => extension.package_info.identifier !== 'org.standardnotes.extensions-manager')
+            .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
+            .map((extension, i) => (
+              <ExtensionItem application={application} extension={extension}
+                first={i === 0} uninstall={uninstallExtension} toggleActivate={toggleActivateExtension} />
+            ))
+        }
+      </PreferencesGroup>
+
+      <PreferencesGroup>
+        {!confirmableExtension &&
+          <PreferencesSegment>
+            <Title>Install Custom Extension</Title>
+            <div className="min-h-2" />
+            <DecoratedInput
+              placeholder={'Enter Extension URL'}
+              text={customUrl}
+              onChange={(value) => { setCustomUrl(value); }}
+            />
+            <div className="min-h-1" />
+            <Button
+              type="primary"
+              label="Install"
+              onClick={() => submitExtensionUrl(customUrl)}
+            />
+
+          </PreferencesSegment>
+        }
+        {confirmableExtension &&
+          <PreferencesSegment>
+            <ConfirmCustomExtension
+              component={confirmableExtension}
+              callback={handleConfirmExtensionSubmit}
+            />
+            <div ref={confirmableEnd} />
+          </PreferencesSegment>
+        }
+      </PreferencesGroup>
+    </PreferencesPane>
+  );
+};