Merge branch 'develop' of github.com:standardnotes/web into develop

2021-10-26 10:21:29 -05:00
parent dbb2598f81 36608487ce
commit 0c332d8b5e
42 changed files with 1041 additions and 683 deletions
--- a/app/assets/javascripts/components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/components/AccountMenu/index.tsx
@@ -105,7 +105,7 @@ const AccountMenu: FunctionComponent<Props> = observer(
    };

    return (
-      <div className="sn-component">
+      <div className='sn-component'>
        <div
          className={`sn-menu-border sn-account-menu sn-dropdown ${
            shouldAnimateCloseMenu
--- a/app/assets/javascripts/components/ComponentView/IsDeprecated.tsx
+++ b/app/assets/javascripts/components/ComponentView/IsDeprecated.tsx
@@ -0,0 +1,32 @@
+import { FunctionalComponent } from 'preact';
+
+interface IProps {
+  deprecationMessage: string | undefined;
+  dismissDeprecationMessage: () => void;
+}
+
+export const IsDeprecated: FunctionalComponent<IProps> = ({
+                                                            deprecationMessage,
+                                                            dismissDeprecationMessage
+                                                          }) => {
+  return (
+    <div className={'sn-component'}>
+      <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
+        <div className={'left'}>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-label warning'}>
+              {deprecationMessage || 'This extension is deprecated.'}
+            </div>
+          </div>
+        </div>
+        <div className={'right'}>
+          <div className={'sk-app-bar-item'} onClick={dismissDeprecationMessage}>
+            <button className={'sn-button small info'}>
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/app/assets/javascripts/components/ComponentView/IsExpired.tsx
+++ b/app/assets/javascripts/components/ComponentView/IsExpired.tsx
@@ -0,0 +1,57 @@
+import { FunctionalComponent } from 'preact';
+
+interface IProps {
+  expiredDate: string;
+  reloadStatus: () => void;
+}
+
+export const IsExpired: FunctionalComponent<IProps> = ({
+                                                         expiredDate,
+                                                         reloadStatus
+                                                       }) => {
+  return (
+    <div className={'sn-component'}>
+      <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
+        <div className={'left'}>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-app-bar-item-column'}>
+              <div className={'sk-circle danger small'} />
+            </div>
+            <div className={'sk-app-bar-item-column'}>
+              <div>
+                <a
+                  className={'sk-label sk-base'}
+                  href={'https://dashboard.standardnotes.com'}
+                  rel={'noopener'}
+                  target={'_blank'}
+                >
+                  Your Extended subscription expired on {expiredDate}
+                </a>
+                <div className={'sk-p'}>
+                  Extensions are in a read-only state.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={'right'}>
+          <div className={'sk-app-bar-item'} onClick={() => reloadStatus()}>
+            <button className={'sn-button small info'}>Reload</button>
+          </div>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-app-bar-item-column'}>
+              <a
+                className={'sn-button small warning'}
+                href={'https://standardnotes.com/help/41/my-extensions-appear-as-expired-even-though-my-subscription-is-still-valid'}
+                rel={'noopener'}
+                target={'_blank'}
+              >
+                Help
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/app/assets/javascripts/components/ComponentView/IssueOnLoading.tsx
+++ b/app/assets/javascripts/components/ComponentView/IssueOnLoading.tsx
@@ -0,0 +1,30 @@
+import { FunctionalComponent } from 'preact';
+
+interface IProps {
+  componentName: string;
+  reloadIframe: () => void;
+}
+
+export const IssueOnLoading: FunctionalComponent<IProps> = ({
+                                                              componentName,
+                                                              reloadIframe
+                                                            }) => {
+  return (
+    <div className={'sn-component'}>
+      <div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
+        <div className={'left'}>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-label.warning'}>
+              There was an issue loading {componentName}
+            </div>
+          </div>
+        </div>
+        <div className={'right'}>
+          <div className={'sk-app-bar-item'} onClick={reloadIframe}>
+            <button className={'sn-button small info'}>Reload</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx
+++ b/app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx
@@ -0,0 +1,58 @@
+import { FunctionalComponent } from 'preact';
+
+interface IProps {
+  isReloading: boolean;
+  reloadStatus: () => void;
+}
+
+export const OfflineRestricted: FunctionalComponent<IProps> = ({
+    isReloading,
+    reloadStatus
+  }) => {
+  return (
+    <div className={'sn-component'}>
+      <div className={'sk-panel static'}>
+        <div className={'sk-panel-content'}>
+          <div className={'sk-panel-section stretch'}>
+            <div className={'sk-panel-column'} />
+            <div className={'sk-h1 sk-bold'}>
+              You have restricted this extension to be used offline only.
+            </div>
+            <div className={'sk-subtitle'}>
+              Offline extensions are not available in the Web app.
+            </div>
+            <div className={'sk-panel-row'} />
+            <div className={'sk-panel-row'}>
+              <div className={'sk-panel-column'}>
+                <div className={'sk-p'}>
+                  You can either:
+                </div>
+                <ul>
+                  <li className={'sk-p'}>
+                          <span className={'font-bold'}>
+                            Enable the Hosted option for this extension by opening the 'Extensions' menu and{' '}
+                            toggling 'Use hosted when local is unavailable' under this extension's options.{' '}
+                            Then press Reload below.
+                          </span>
+                  </li>
+                  <li className={'sk-p'}>
+                    <span className={'font-bold'}>Use the Desktop application.</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className={'sk-panel-row'}>
+              {isReloading ?
+                <div className={'sk-spinner info small'} />
+                :
+                <button className={'sn-button small info'} onClick={() => reloadStatus()}>
+                  Reload
+                </button>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/app/assets/javascripts/components/ComponentView/UrlMissing.tsx
+++ b/app/assets/javascripts/components/ComponentView/UrlMissing.tsx
@@ -0,0 +1,26 @@
+import { FunctionalComponent } from 'preact';
+
+interface IProps {
+  componentName: string;
+}
+
+export const UrlMissing: FunctionalComponent<IProps> = ({ componentName }) => {
+  return (
+    <div className={'sn-component'}>
+      <div className={'sk-panel static'}>
+        <div className={'sk-panel-content'}>
+          <div className={'sk-panel-section stretch'}>
+            <div className={'sk-panel-section-title'}>
+              This extension is not installed correctly.
+            </div>
+            <p>Please uninstall {componentName}, then re-install it.</p>
+            <p>
+              This issue can occur if you access Standard Notes using an older version of the app.{' '}
+              Ensure you are running at least version 2.1 on all platforms.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/app/assets/javascripts/components/ComponentView/index.tsx
+++ b/app/assets/javascripts/components/ComponentView/index.tsx
@@ -0,0 +1,360 @@
+import { ComponentAction, LiveItem, SNComponent } from '@node_modules/@standardnotes/snjs';
+import { WebApplication } from '@/ui_models/application';
+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';
+import { IsExpired } from '@/components/ComponentView/IsExpired';
+import { IssueOnLoading } from '@/components/ComponentView/IssueOnLoading';
+import { AppState } from '@/ui_models/app_state';
+import { ComponentArea } from '@node_modules/@standardnotes/features';
+
+interface IProps {
+  application: WebApplication;
+  appState: AppState;
+  componentUuid: string;
+  onLoad?: (component: SNComponent) => void;
+  templateComponent?: SNComponent;
+  manualDealloc?: boolean;
+}
+
+/**
+ * The maximum amount of time we'll wait for a component
+ * to load before displaying error
+ */
+const MaxLoadThreshold = 4000;
+const VisibilityChangeKey = 'visibilitychange';
+const avoidFlickerTimeout = 7;
+
+export const ComponentView: FunctionalComponent<IProps> = observer(
+  ({
+     application,
+     appState,
+     onLoad,
+     componentUuid,
+     templateComponent,
+     manualDealloc = false,
+   }) => {
+    const liveComponentRef = useRef<LiveItem<SNComponent> | null>(null);
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+
+    const [isIssueOnLoading, setIsIssueOnLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isReloading, setIsReloading] = useState(false);
+    const [loadTimeout, setLoadTimeout] = useState<number | undefined>(undefined);
+    const [isExpired, setIsExpired] = useState(false);
+    const [isComponentValid, setIsComponentValid] = useState(true);
+    const [error, setError] = useState<'offline-restricted' | 'url-missing' | undefined>(undefined);
+    const [isDeprecated, setIsDeprecated] = useState(false);
+    const [deprecationMessage, setDeprecationMessage] = useState<string | undefined>(undefined);
+    const [isDeprecationMessageDismissed, setIsDeprecationMessageDismissed] = useState(false);
+    const [didAttemptReload, setDidAttemptReload] = useState(false);
+    const [component, setComponent] = useState<SNComponent | undefined>(undefined);
+
+    const getComponent = useCallback((): SNComponent => {
+      return (templateComponent || liveComponentRef.current?.item) as SNComponent;
+    }, [templateComponent]);
+
+    const reloadIframe = () => {
+      setTimeout(() => {
+        setIsReloading(true);
+        setTimeout(() => {
+          setIsReloading(false);
+        });
+      });
+    };
+
+    const reloadStatus = useCallback(() => {
+      if (!component) {
+        return;
+      }
+
+      const offlineRestricted = component.offlineOnly && !isDesktopApplication();
+      const hasUrlError = function() {
+        if (isDesktopApplication()) {
+          return !component.local_url && !component.hasValidHostedUrl();
+        } else {
+          return !component.hasValidHostedUrl();
+        }
+      }();
+
+      setIsExpired(component.valid_until && component.valid_until <= new Date());
+
+      const readonlyState = application.componentManager!.getReadonlyStateForComponent(component);
+
+      if (!readonlyState.lockReadonly) {
+        application.componentManager!.setReadonlyStateForComponent(component, isExpired);
+      }
+      setIsComponentValid(!offlineRestricted && !hasUrlError);
+
+      if (!isComponentValid) {
+        setIsLoading(false);
+      }
+
+      if (offlineRestricted) {
+        setError('offline-restricted');
+      } else if (hasUrlError) {
+        setError('url-missing');
+      } else {
+        setError(undefined);
+      }
+      setIsDeprecated(component.isDeprecated);
+      setDeprecationMessage(component.package_info.deprecation_message);
+    }, [application.componentManager, component, isComponentValid, isExpired]);
+
+    const dismissDeprecationMessage = () => {
+      setTimeout(() => {
+        setIsDeprecationMessageDismissed(true);
+      });
+    };
+
+    const onVisibilityChange = useCallback(() => {
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      if (isIssueOnLoading) {
+        reloadIframe();
+      }
+    }, [isIssueOnLoading]);
+
+    const handleIframeLoadTimeout =useCallback(async () => {
+      if (isLoading) {
+        setIsLoading(false);
+        setIsIssueOnLoading(true);
+
+        if (!didAttemptReload) {
+          setDidAttemptReload(true);
+          reloadIframe();
+        } else {
+          document.addEventListener(
+            VisibilityChangeKey,
+            onVisibilityChange
+          );
+        }
+      }
+    }, [didAttemptReload, isLoading, onVisibilityChange]);
+
+    const handleIframeLoad = useCallback(async (iframe: HTMLIFrameElement) => {
+      if (!component) {
+        return;
+      }
+
+      let desktopError = false;
+      if (isDesktopApplication()) {
+        try {
+          /** Accessing iframe.contentWindow.origin only allowed in desktop app. */
+          if (!iframe.contentWindow!.origin || iframe.contentWindow!.origin === 'null') {
+            desktopError = true;
+          }
+          // eslint-disable-next-line no-empty
+        } catch (e) {
+        }
+      }
+      clearTimeout(loadTimeout);
+      await application.componentManager!.registerComponentWindow(
+        component,
+        iframe.contentWindow!
+      );
+
+      setTimeout(() => {
+        setIsLoading(false);
+        setIsIssueOnLoading(desktopError ? true : false);
+        onLoad?.(component!);
+      }, avoidFlickerTimeout);
+    }, [application.componentManager, component, loadTimeout, onLoad]);
+
+    const loadComponent = useCallback(() => {
+      if (!component) {
+        throw Error('Component view is missing component');
+      }
+
+      if (!component.active && !component.isEditor() && component.area !== ComponentArea.Modal) {
+        /** Editors don't need to be active to be displayed */
+        throw Error('Component view component must be active');
+      }
+
+      setIsLoading(true);
+      if (loadTimeout) {
+        clearTimeout(loadTimeout);
+      }
+      const timeoutHandler = setTimeout(() => {
+        handleIframeLoadTimeout();
+      }, MaxLoadThreshold);
+
+      setLoadTimeout(timeoutHandler);
+    }, [component, handleIframeLoadTimeout, loadTimeout]);
+
+    useEffect(() => {
+      if (!iframeRef.current) {
+        return;
+      }
+
+      iframeRef.current.onload = () => {
+        if (!component) {
+          return;
+        }
+
+        const iframe = application.componentManager!.iframeForComponent(
+          component.uuid
+        );
+        if (!iframe) {
+          return;
+        }
+
+        setTimeout(() => {
+          loadComponent();
+          reloadStatus();
+          handleIframeLoad(iframe);
+        });
+      };
+    }, [application.componentManager, component, handleIframeLoad, loadComponent, reloadStatus]);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const expiredDate = isExpired ? component.dateToLocalizedString(component.valid_until) : '';
+
+    const getUrl = () => {
+      const url = component ? application.componentManager!.urlForComponent(component) : '';
+      return url as string;
+    };
+
+    useEffect(() => {
+      if (componentUuid) {
+        liveComponentRef.current = new LiveItem(componentUuid, application);
+      } else {
+        application.componentManager.addTemporaryTemplateComponent(templateComponent as SNComponent);
+      }
+
+      return () => {
+        if (application.componentManager) {
+          /** Component manager Can be destroyed already via locking */
+          if (component) {
+            application.componentManager.onComponentIframeDestroyed(component.uuid);
+          }
+          if (templateComponent) {
+            application.componentManager.removeTemporaryTemplateComponent(templateComponent);
+          }
+        }
+
+        if (liveComponentRef.current) {
+          liveComponentRef.current.deinit();
+        }
+
+        document.removeEventListener(
+          VisibilityChangeKey,
+          onVisibilityChange
+        );
+      };
+    }, [appState, application, component, componentUuid, onVisibilityChange, reloadStatus, templateComponent]);
+
+    useEffect(() => {
+      // Set/update `component` based on `componentUuid` prop.
+      // It's a hint that the props were changed and we should rerender this component (and particularly, the iframe).
+      if (!component || component.uuid && componentUuid && component.uuid !== componentUuid) {
+        const latestComponentValue = getComponent();
+        setComponent(latestComponentValue);
+      }
+    }, [component, componentUuid, getComponent]);
+
+    useEffect(() => {
+      if (!component) {
+        return;
+      }
+
+      const unregisterComponentHandler = application.componentManager!.registerHandler({
+        identifier: 'component-view-' + Math.random(),
+        areas: [component.area],
+        actionHandler: (component, action, data) => {
+          switch (action) {
+            case (ComponentAction.SetSize):
+              application.componentManager!.handleSetSizeEvent(component, data);
+              break;
+            case (ComponentAction.KeyDown):
+              application.io.handleComponentKeyDown(data.keyboardModifier);
+              break;
+            case (ComponentAction.KeyUp):
+              application.io.handleComponentKeyUp(data.keyboardModifier);
+              break;
+            case (ComponentAction.Click):
+              application.getAppState().notes.setContextMenuOpen(false);
+              break;
+            default:
+              return;
+          }
+        }
+      });
+
+      return () => {
+        unregisterComponentHandler();
+      };
+    }, [application, component]);
+
+    useEffect(() => {
+      const unregisterDesktopObserver = application.getDesktopService()
+        .registerUpdateObserver((component: SNComponent) => {
+          if (component.uuid === component.uuid && component.active) {
+            reloadIframe();
+          }
+        });
+
+      return () => {
+        unregisterDesktopObserver();
+      };
+    }, [application]);
+
+    if (!component) {
+      return null;
+    }
+
+    return (
+      <>
+        {isIssueOnLoading && (
+          <IssueOnLoading
+            componentName={component.name}
+            reloadIframe={reloadIframe}
+          />
+        )}
+        {isExpired && (
+          <IsExpired expiredDate={expiredDate} reloadStatus={reloadStatus} />
+        )}
+        {isDeprecated && !isDeprecationMessageDismissed && (
+          <IsDeprecated
+            deprecationMessage={deprecationMessage}
+            dismissDeprecationMessage={dismissDeprecationMessage}
+          />
+        )}
+        {error == 'offline-restricted' && (
+          <OfflineRestricted isReloading={isReloading} reloadStatus={reloadStatus} />
+        )}
+        {error == 'url-missing' && (
+          <UrlMissing componentName={component.name} />
+        )}
+        {component.uuid && !isReloading && isComponentValid && (
+          <iframe
+            ref={iframeRef}
+            data-component-id={component.uuid}
+            frameBorder={0}
+            data-attr-id={`component-iframe-${component.uuid}`}
+            src={getUrl()}
+            sandbox='allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms allow-downloads'
+          >
+            Loading
+          </iframe>
+        )}
+        {isLoading && (
+          <div className={'loading-overlay'} />
+        )}
+      </>
+    );
+  });
+
+export const ComponentViewDirective = toDirective<IProps>(ComponentView, {
+  onLoad: '=',
+  componentUuid: '=',
+  templateComponent: '=',
+  manualDealloc: '='
+});
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/app/assets/javascripts/components/Icon.tsx
@@ -50,6 +50,7 @@ import EyeOffIcon from '../../icons/ic-eye-off.svg';
 import LockIcon from '../../icons/ic-lock.svg';
 import ArrowsSortUpIcon from '../../icons/ic-arrows-sort-up.svg';
 import ArrowsSortDownIcon from '../../icons/ic-arrows-sort-down.svg';
+import WindowIcon from '../../icons/ic-window.svg';

 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
@@ -106,6 +107,7 @@ const ICONS = {
  'check-bold': CheckBoldIcon,
  'account-circle': AccountCircleIcon,
  'menu-arrow-down': MenuArrowDownIcon,
+  window: WindowIcon
 };

 export type IconType = keyof typeof ICONS;