Extensions api fixes (#1233)

* fix: create extension instance only when enabled

Signed-off-by: Roman <ixrock@gmail.com>

* mark extension.isEnabled with private modifier

Signed-off-by: Roman <ixrock@gmail.com>

* try-catch errors for extension.disable()

Signed-off-by: Roman <ixrock@gmail.com>

* fixes & refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* make ext.isBundled non optional

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+extensions/extensions.scss

@@ -2,11 +2,17 @@
   --width: 100%;
   --max-width: auto;
 
-  .extension {
-    --flex-gap: $padding / 3;
-    padding: $padding $padding * 2;
-    background: $colorVague;
-    border-radius: $radius;
+  .extension-list {
+    .extension {
+      --flex-gap: $padding / 3;
+      padding: $padding $padding * 2;
+      background: $colorVague;
+      border-radius: $radius;
+
+      &:not(:first-of-type) {
+        margin-top: $padding * 2;
+      }
+    }
   }
 
   .extensions-path {

src/renderer/components/+extensions/extensions.tsx

@@ -19,7 +19,8 @@ export class Extensions extends React.Component {
 
   @computed get extensions() {
     const searchText = this.search.toLowerCase();
-    return extensionLoader.userExtensions.filter(({ name, description }) => {
+    return Array.from(extensionLoader.userExtensions.values()).filter(ext => {
+      const { name, description } = ext.manifest;
       return [
         name.toLowerCase().includes(searchText),
         description.toLowerCase().includes(searchText),
@@ -68,9 +69,10 @@ export class Extensions extends React.Component {
       )
     }
     return extensions.map(ext => {
-      const { id, name, description, isEnabled } = ext;
+      const { manifestPath: extId, isEnabled, manifest } = ext;
+      const { name, description } = manifest;
       return (
-        <div key={id} className="extension flex gaps align-center">
+        <div key={extId} className="extension flex gaps align-center">
           <div className="box grow flex column gaps">
             <div className="package">
               Name: <code className="name">{name}</code>
@@ -80,10 +82,10 @@ export class Extensions extends React.Component {
             </div>
           </div>
           {!isEnabled && (
-            <Button plain active onClick={() => ext.enable()}>Enable</Button>
+            <Button plain active onClick={() => ext.isEnabled = true}>Enable</Button>
           )}
           {isEnabled && (
-            <Button accent onClick={() => ext.disable()}>Disable</Button>
+            <Button accent onClick={() => ext.isEnabled = false}>Disable</Button>
           )}
         </div>
       )
@@ -102,7 +104,7 @@ export class Extensions extends React.Component {
             value={this.search}
             onChange={(value) => this.search = value}
           />
-          <div className="extension-list flex column gaps">
+          <div className="extension-list">
             {this.renderExtensions()}
           </div>
         </WizardLayout>