From 04136159dcb19c09f83b2fbcfdec510863684278 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Sun, 14 Nov 2021 14:27:26 -0600
Subject: [PATCH] feat: ability to uninstall any extension

---
 .../preferences/panes/Extensions.tsx          | 97 +++++++++++--------
 .../extensions-segments/ExtensionItem.tsx     | 35 +++----
 2 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/preferences/panes/Extensions.tsx b/app/assets/javascripts/preferences/panes/Extensions.tsx
index 5bf8b8f01..9fdb73d12 100644
--- a/app/assets/javascripts/preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -1,4 +1,4 @@
-import { ContentType, SNComponent } from '@standardnotes/snjs';
+import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs';
 import { Button } from '@/components/Button';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { WebApplication } from '@/ui_models/application';
@@ -35,8 +35,22 @@ export const Extensions: FunctionComponent<{
   }, [confirmableExtension, confirmableEnd]);
 
   const uninstallExtension = async (extension: SNComponent) => {
-    await application.deleteItem(extension);
-    setExtensions(loadExtensions(application));
+    application.alertService.confirm(
+      'Are you sure you want to uninstall this extension? Note that extensions managed by your subscription will automatically be re-installed on application restart.',
+      'Uninstall Extension?',
+      'Uninstall',
+      ButtonType.Danger,
+      'Cancel'
+    )
+      .then(async (shouldRemove: boolean) => {
+        if (shouldRemove) {
+          await application.deleteItem(extension);
+          setExtensions(loadExtensions(application));
+        }
+      })
+      .catch((err: string) => {
+        application.alertService.alert(err);
+      });
   };
 
   const submitExtensionUrl = async (url: string) => {
@@ -72,50 +86,51 @@ export const Extensions: FunctionComponent<{
   return (
     <div>
       {visibleExtensions.length > 0 &&
-      <div>
-        {
-          visibleExtensions
-            .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
-            .map((extension, i) => (
-              <ExtensionItem
-                application={application}
-                extension={extension}
-                latestVersion={extensionsLatestVersions.getVersion(extension)}
-                first={i === 0}
-                uninstall={uninstallExtension}
-                toggleActivate={toggleActivateExtension} />
-            ))
-        }
-      </div>
+        <div>
+          {
+            visibleExtensions
+              .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
+              .map((extension, i) => (
+                <ExtensionItem
+                  key={extension.uuid}
+                  application={application}
+                  extension={extension}
+                  latestVersion={extensionsLatestVersions.getVersion(extension)}
+                  first={i === 0}
+                  uninstall={uninstallExtension}
+                  toggleActivate={toggleActivateExtension} />
+              ))
+          }
+        </div>
       }
 
       <div>
         {!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-2" />
-          <Button
-            className="min-w-20"
-            type="normal"
-            label="Install"
-            onClick={() => submitExtensionUrl(customUrl)}
-          />
-        </PreferencesSegment>
+          <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-2" />
+            <Button
+              className="min-w-20"
+              type="normal"
+              label="Install"
+              onClick={() => submitExtensionUrl(customUrl)}
+            />
+          </PreferencesSegment>
         }
         {confirmableExtension &&
-        <PreferencesSegment>
-          <ConfirmCustomExtension
-            component={confirmableExtension}
-            callback={handleConfirmExtensionSubmit}
-          />
-          <div ref={confirmableEnd} />
-        </PreferencesSegment>
+          <PreferencesSegment>
+            <ConfirmCustomExtension
+              component={confirmableExtension}
+              callback={handleConfirmExtensionSubmit}
+            />
+            <div ref={confirmableEnd} />
+          </PreferencesSegment>
         }
       </div>
     </div>
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
index 445fe7ce3..8ca9bd90b 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -101,7 +101,6 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
     };
 
     const localInstallable = extension.package_info.download_url;
-    const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
     const installedVersion = extension.package_info.version;
     const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area);
 
@@ -120,24 +119,22 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
         {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
         {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
 
-        {(isToggleable || isExternal) &&
-          <>
-            <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" />
-                </>
-              )}
-              {isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
-            </div>
-          </>
-        }
+        <>
+          <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>
+        </>
       </PreferencesSegment >
     );
   };