From 1d98d38cc3efc975a74e1e27f299e70bb63cddf7 Mon Sep 17 00:00:00 2001
From: Gorjan <mogi57@gmail.com>
Date: Mon, 11 Oct 2021 14:10:17 +0200
Subject: [PATCH 1/2] feat(preferences): show latest extension version

---
 .../preferences/panes/Extensions.tsx          | 53 +++++++++++++++----
 .../extensions-segments/ExtensionItem.tsx     | 20 +++----
 2 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/preferences/panes/Extensions.tsx b/app/assets/javascripts/preferences/panes/Extensions.tsx
index 1f273a8e43d..20381385a9c 100644
--- a/app/assets/javascripts/preferences/panes/Extensions.tsx
+++ b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -11,6 +11,7 @@ import {
 } from '../components';
 import { ConfirmCustomExtension, ExtensionItem } from './extensions-segments';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { FeatureDescription } from '@standardnotes/features';
 
 const loadExtensions = (application: WebApplication) => application.getItems([
   ContentType.ActionsExtension,
@@ -18,6 +19,22 @@ const loadExtensions = (application: WebApplication) => application.getItems([
   ContentType.Theme,
 ]) as SNComponent[];
 
+function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
+  if (features == undefined) return;
+  for (const feature of features) {
+    versionMap.set(feature.identifier, feature.version);
+  }
+}
+
+const loadLatestVersions = (application: WebApplication) => application.getAvailableSubscriptions()
+  .then(subscriptions => {
+    const versionMap: Map<string, string> = new Map();
+    collectFeatures(subscriptions?.CORE_PLAN?.features, versionMap);
+    collectFeatures(subscriptions?.PLUS_PLAN?.features, versionMap);
+    collectFeatures(subscriptions?.PRO_PLAN?.features, versionMap);
+    return versionMap;
+  });
+
 export const Extensions: FunctionComponent<{
   application: WebApplication
 }> = ({ application }) => {
@@ -25,6 +42,7 @@ export const Extensions: FunctionComponent<{
   const [customUrl, setCustomUrl] = useState('');
   const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
   const [extensions, setExtensions] = useState(loadExtensions(application));
+  const [latestVersions, setLatestVersions] = useState<Map<string, string> | undefined>(undefined);
 
   const confirmableEnd = useRef<HTMLDivElement>(null);
 
@@ -34,6 +52,12 @@ export const Extensions: FunctionComponent<{
     }
   }, [confirmableExtension, confirmableEnd]);
 
+  useEffect(() => {
+    if (!latestVersions) {
+      loadLatestVersions(application).then(versions => setLatestVersions(versions));
+    }
+  }, [latestVersions, application]);
+
   const uninstallExtension = async (extension: SNComponent) => {
     await application.deleteItem(extension);
     setExtensions(loadExtensions(application));
@@ -66,17 +90,24 @@ export const Extensions: FunctionComponent<{
 
   return (
     <PreferencesPane>
-      <PreferencesGroup>
-        {
-          extensions
-            .filter(extension => extension.package_info.identifier !== 'org.standardnotes.extensions-manager')
-            .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
-            .map((extension, i) => (
-              <ExtensionItem application={application} extension={extension}
-                first={i === 0} uninstall={uninstallExtension} toggleActivate={toggleActivateExtension} />
-            ))
-        }
-      </PreferencesGroup>
+      {extensions.length > 0 &&
+        <PreferencesGroup>
+          {
+            extensions
+              .filter(extension => extension.package_info.identifier !== 'org.standardnotes.extensions-manager')
+              .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
+              .map((extension, i) => (
+                <ExtensionItem
+                  application={application}
+                  extension={extension}
+                  latestVersion={latestVersions?.get(extension.package_info.identifier)}
+                  first={i === 0}
+                  uninstall={uninstallExtension}
+                  toggleActivate={toggleActivateExtension} />
+              ))
+          }
+        </PreferencesGroup>
+      }
 
       <PreferencesGroup>
         {!confirmableExtension &&
diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
index c6f104ccc97..388159cd969 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -8,14 +8,13 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { Button } from "@/components/Button";
 
 const ExtensionVersions: FunctionComponent<{
-  extension: SNComponent
-}> = ({ extension }) => {
+  installedVersion: string,
+  latestVersion: string | undefined,
+}> = ({ installedVersion, latestVersion }) => {
   return (
-    <div className="flex flex-row">
-      <div className="flex flex-col flex-grow">
-        <Subtitle>Installed version <b>{extension.package_info.version}</b></Subtitle>
-      </div>
-    </div>
+    <>
+      <Subtitle>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest <b>{latestVersion}</b>)</>}</Subtitle>
+    </>
   );
 };
 
@@ -98,9 +97,10 @@ export const ExtensionItem: FunctionComponent<{
   application: WebApplication,
   extension: SNComponent,
   first: boolean,
+  latestVersion: string | undefined,
   uninstall: (extension: SNComponent) => void,
   toggleActivate: (extension: SNComponent) => void,
-}> = ({ application, extension, first, uninstall, toggleActivate }) => {
+}> = ({ 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);
@@ -156,6 +156,8 @@ export const ExtensionItem: FunctionComponent<{
 
   const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
 
+  const installedVersion = extension.package_info.version;
+
   const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
 
   return (
@@ -168,7 +170,7 @@ export const ExtensionItem: FunctionComponent<{
       <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
       <div className="min-h-2" />
 
-      <ExtensionVersions extension={extension} />
+      <ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
 
       {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
       {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}

From 807dad652196917d83ef9fa452ac8f09bf57b296 Mon Sep 17 00:00:00 2001
From: Gorjan <mogi57@gmail.com>
Date: Mon, 11 Oct 2021 15:09:48 +0200
Subject: [PATCH 2/2] feat: better latest version description

---
 .../preferences/panes/extensions-segments/ExtensionItem.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
index 388159cd969..9709c8b5bcc 100644
--- a/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
@@ -13,7 +13,7 @@ const ExtensionVersions: FunctionComponent<{
 }> = ({ installedVersion, latestVersion }) => {
   return (
     <>
-      <Subtitle>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest <b>{latestVersion}</b>)</>}</Subtitle>
+      <Subtitle>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest is <b>{latestVersion}</b>)</>}</Subtitle>
     </>
   );
 };