feat(preferences): show latest extension version (#675)

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 &&

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 is <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} />}