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
standardnotes · Dec 24, 2021 · ebdae31 · ebdae31
1 parent 237cd91
commit ebdae31
Show file tree

Hide file tree

Showing 39 changed files with 873 additions and 1,011 deletions.
diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts
@@ -51,7 +51,6 @@ import {
 
 import {
   ActionsMenu,
-  ComponentModal,
   EditorMenu,
   InputModal,
   MenuRow,
@@ -166,7 +165,6 @@ const startApplication: StartApplication = async function startApplication(
     .directive('accountSwitcher', () => new AccountSwitcher())
     .directive('actionsMenu', () => new ActionsMenu())
     .directive('challengeModal', () => new ChallengeModal())
-    .directive('componentModal', () => new ComponentModal())
     .directive('componentView', ComponentViewDirective)
     .directive('editorMenu', () => new EditorMenu())
     .directive('inputModal', () => new InputModal())

diff --git a/app/assets/javascripts/components/ComponentView/IsExpired.tsx b/app/assets/javascripts/components/ComponentView/IsExpired.tsx
@@ -5,11 +5,14 @@ interface IProps {
   expiredDate: string;
   componentName: string;
   featureStatus: FeatureStatus;
-  reloadStatus: () => void;
   manageSubscription: () => void;
 }
 
-const statusString = (featureStatus: FeatureStatus, expiredDate: string, componentName: string) => {
+const statusString = (
+  featureStatus: FeatureStatus,
+  expiredDate: string,
+  componentName: string
+) => {
   switch (featureStatus) {
     case FeatureStatus.InCurrentPlanButExpired:
       return `Your subscription expired on ${expiredDate}`;
@@ -25,9 +28,8 @@ const statusString = (featureStatus: FeatureStatus, expiredDate: string, compone
 export const IsExpired: FunctionalComponent<IProps> = ({
   expiredDate,
   featureStatus,
-  reloadStatus,
   componentName,
-  manageSubscription
+  manageSubscription,
 }) => {
   return (
     <div className={'sn-component'}>
@@ -50,11 +52,13 @@ export const IsExpired: FunctionalComponent<IProps> = ({
           </div>
         </div>
         <div className={'right'}>
-          <div className={'sk-app-bar-item'} onClick={() => manageSubscription()}>
-            <button className={'sn-button small success'}>Manage Subscription</button>
-          </div>
-          <div className={'sk-app-bar-item'} onClick={() => reloadStatus()}>
-            <button className={'sn-button small info'}>Reload</button>
+          <div
+            className={'sk-app-bar-item'}
+            onClick={() => manageSubscription()}
+          >
+            <button className={'sn-button small success'}>
+              Manage Subscription
+            </button>
           </div>
         </div>
       </div>

diff --git a/app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx b/app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx
@@ -1,53 +1,36 @@
 import { FunctionalComponent } from 'preact';
 
-interface IProps {
-  isReloading: boolean;
-  reloadStatus: () => void;
-}
-
-export const OfflineRestricted: FunctionalComponent<IProps> = ({
-  isReloading,
-  reloadStatus,
-}) => {
+export const OfflineRestricted: FunctionalComponent = () => {
   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 component to be used offline only.
+              You have restricted this component to not use a hosted version.
             </div>
             <div className={'sk-subtitle'}>
-              Offline components are not available in the web application.
+              Locally-installed components are not available in the web
+              application.
             </div>
             <div className={'sk-panel-row'} />
             <div className={'sk-panel-row'}>
               <div className={'sk-panel-column'}>
-                <div className={'sk-p'}>You can either:</div>
+                <div className={'sk-p'}>
+                  To continue, choose from the following options:
+                </div>
                 <ul>
                   <li className={'sk-p'}>
-                    Enable the Hosted option for this component by opening
+                    Enable the Hosted option for this component by opening the
                     Preferences {'>'} General {'>'} Advanced Settings menu and{' '}
                     toggling 'Use hosted when local is unavailable' under this
-                    components's options. Then press Reload below.
+                    component's options. Then press Reload.
                   </li>
                   <li className={'sk-p'}>Use the desktop application.</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>