feat: native components (#789)

* wip: component viewer

* feat: get component status from component viewer

* feat: native components

* fix: remove unused property

* fix: remove unused func

* chore(deps): snjs 2.29.0

* fix: import location

* feat: native components

* fix: remove unused func

* feat: component viewer (#781)

* wip: component viewer

* feat: get component status from component viewer

* fix: remove unused property

* chore(deps): snjs 2.29.0

* fix: import location

* chore: use cp instead of webpack copy

* fix: types

* chore: misc

app/assets/javascripts/components/ComponentView/index.tsx

@@ -12,7 +12,6 @@ import { FunctionalComponent } from 'preact';
 import { toDirective } from '@/components/utils';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
-import { isDesktopApplication } from '@/utils';
 import { OfflineRestricted } from '@/components/ComponentView/OfflineRestricted';
 import { UrlMissing } from '@/components/ComponentView/UrlMissing';
 import { IsDeprecated } from '@/components/ComponentView/IsDeprecated';
@@ -139,19 +138,6 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
       const iframe = iframeRef.current as HTMLIFrameElement;
       iframe.onload = () => {
         const contentWindow = iframe.contentWindow as Window;
-
-        let hasDesktopError = false;
-        const canAccessWindowOrigin = isDesktopApplication();
-        if (canAccessWindowOrigin) {
-          try {
-            if (!contentWindow.origin || contentWindow.origin === 'null') {
-              hasDesktopError = true;
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        }
-
         excessiveLoadingTimeout.current &&
           clearTimeout(excessiveLoadingTimeout.current);
 
@@ -159,7 +145,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
 
         setTimeout(() => {
           setIsLoading(false);
-          setHasIssueLoading(hasDesktopError);
+          setHasIssueLoading(false);
           onLoad?.(component);
         }, MSToWaitAfterIframeLoadToAvoidFlicker);
       };

app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -89,8 +89,8 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
           } else if (!aIsLayerable && bIsLayerable) {
             return -1;
           } else {
-            return a.package_info.name.toLowerCase() <
-              b.package_info.name.toLowerCase()
+            return a.name.toLowerCase() <
+              b.name.toLowerCase()
               ? -1
               : 1;
           }

app/assets/javascripts/preferences/PreferencesMenu.ts

@@ -3,7 +3,7 @@ import { action, makeAutoObservable, observable } from 'mobx';
 import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
 import { ContentType, SNComponent } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
-import { FeatureIdentifier } from '@node_modules/@standardnotes/features/dist/Domain/Feature/FeatureIdentifier';
+import { FeatureIdentifier } from '@standardnotes/features';
 import { ComponentArea } from '@standardnotes/snjs';
 
 const PREFERENCE_IDS = [

app/assets/javascripts/preferences/panes/extensions-segments/ConfirmCustomExtension.tsx

@@ -28,7 +28,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
     },
     {
       label: 'Hosted URL',
-      value: component.package_info.url
+      value: component.thirdPartyPackageInfo.url
     },
     {
       label: 'Download URL',

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

@@ -8,27 +8,6 @@ import { useState } from "preact/hooks";
 import { Button } from "@/components/Button";
 import { RenameExtension } from "./RenameExtension";
 
-const ExtensionVersions: FunctionComponent<{
-  installedVersion: string,
-  latestVersion: string | undefined,
-}> = ({ installedVersion, latestVersion }) => {
-  return (
-    <>
-      <SubtitleLight>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest is <b>{latestVersion}</b>)</>}</SubtitleLight>
-    </>
-  );
-};
-
-const AutoUpdateLocal: FunctionComponent<{
-  autoupdateDisabled: boolean,
-  toggleAutoupdate: () => void
-}> = ({ autoupdateDisabled, toggleAutoupdate }) => (
-  <div className="flex flex-row">
-    <SubtitleLight className="flex-grow">Autoupdate local installation</SubtitleLight>
-    <Switch onChange={toggleAutoupdate} checked={!autoupdateDisabled} />
-  </div>
-);
-
 const UseHosted: FunctionComponent<{
   offlineOnly: boolean, toggleOfllineOnly: () => void
 }> = ({ offlineOnly, toggleOfllineOnly }) => (
@@ -49,9 +28,9 @@ export interface ExtensionItemProps {
 
 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 [autoupdateDisabled, setAutoupdateDisabled] = useState(extension.autoupdateDisabled ?? false);
+    const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false);
+    const [extensionName, setExtensionName] = useState(extension.name);
 
     const toggleAutoupdate = () => {
       const newAutoupdateValue = !autoupdateDisabled;
@@ -101,8 +80,6 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
     };
 
     const localInstallable = extension.package_info.download_url;
-    const installedVersion = extension.package_info.version;
-    const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area);
 
     return (
       <PreferencesSegment classes={'mb-5'}>
@@ -114,24 +91,11 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
         <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} />}
 
         <>
           <div className="min-h-2" />
           <div className="flex flex-row">
-            {isToggleable && (
-              <>
-                {(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" />
-              </>
-            )}
             <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />
           </div>
         </>

app/assets/javascripts/preferences/panes/extensions-segments/ExtensionsLatestVersions.ts

@@ -30,6 +30,6 @@ export class ExtensionsLatestVersions {
 function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
   if (features == undefined) return;
   for (const feature of features) {
-    versionMap.set(feature.identifier, feature.version);
+    versionMap.set(feature.identifier, feature.version!);
   }
 }

app/assets/javascripts/services/desktopManager.ts

@@ -74,7 +74,7 @@ export class DesktopManager
    * Keys are not passed into ItemParams, so the result is not encrypted
    */
   convertComponentForTransmission(component: SNComponent) {
-    return this.application.protocolService!.payloadByEncryptingPayload(
+    return this.application.protocolService.payloadByEncryptingPayload(
       component.payloadRepresentation(),
       EncryptionIntent.FileDecrypted
     );
@@ -122,7 +122,7 @@ export class DesktopManager
     }
   }
 
-  desktop_windowGainedFocus() {
+  desktop_windowGainedFocus(): void {
     this.$rootScope.$broadcast('window-gained-focus');
   }