@peers-app/peers-ui 0.18.8 → 0.19.6

package/src/screens/packages/package-info.tsx

@@ -2,27 +2,27 @@ import {
   doesTagMatch,
   getEffectivePackagePrefs,
   groupDeviceVar,
+  hasDeviceFollowOverride,
   type IDoc,
   type IPackage,
   type IPackageVersion,
+  Packages,
   PackageVersions,
   packagePrefsVar,
   packagesRootDir,
   rpcServerCalls,
   updatePackagePrefs,
 } from "@peers-app/peers-sdk";
-import React from "react";
 import { Input } from "../../components/input";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 import { Tooltip } from "../../components/tooltip";
 import { useObservable, usePromise } from "../../hooks";
 
-export const PackageInfo = (props: {
-  pkg: IDoc<IPackage>;
-  saveDeviceTagRef?: React.MutableRefObject<(() => Promise<void>) | null>;
-}) => {
+/** Info tab for the package details screen. */
+export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
   const { pkg } = props;
   const [followVersionTags] = useObservable(pkg.qs.followVersionTags);
+  const [versionFollowRange] = useObservable(pkg.qs.versionFollowRange);
 
   const localPathVar = groupDeviceVar<string>(`packageLocalPath_${pkg.packageId}`, {
     defaultValue: `${packagesRootDir}/${pkg.name}`,
@@ -32,45 +32,16 @@ export const PackageInfo = (props: {
   const [devicePrefs] = useObservable(packagePrefsVar(pkg.packageId));
   const effective = getEffectivePackagePrefs(pkg.toJS(), devicePrefs);
   const activeVersionId = effective.activePackageVersionId;
-  const deviceFollowTags = devicePrefs?.followTags;
   const isPinned = effective.isPinned;
   const followRange = effective.followRange;
 
-  const [deviceTagDraft, setDeviceTagDraft] = React.useState(deviceFollowTags || "");
-  const savingRef = React.useRef(false);
+  const hasOverride = hasDeviceFollowOverride(devicePrefs);
 
-  React.useEffect(() => {
-    if (!savingRef.current) {
-      setDeviceTagDraft(deviceFollowTags || "");
-    }
-  }, [deviceFollowTags]);
+  const groupFollowTags = followVersionTags === "stable,beta" ? "stable,beta" : "stable";
+  const groupRange = versionFollowRange || "latest";
 
-  const deviceTagDirty = deviceTagDraft.trim() !== (deviceFollowTags || "");
-  const prevDirtyRef = React.useRef(false);
-  React.useEffect(() => {
-    if (deviceTagDirty && !prevDirtyRef.current) {
-      pkg.q((pkg.q() || 0) + 1);
-    } else if (!deviceTagDirty && prevDirtyRef.current) {
-      pkg.q(Math.max(0, (pkg.q() || 0) - 1));
-    }
-    prevDirtyRef.current = deviceTagDirty;
-  }, [deviceTagDirty, pkg.q]);
-
-  if (props.saveDeviceTagRef) {
-    props.saveDeviceTagRef.current = async () => {
-      const val = deviceTagDraft.trim();
-      if (val !== (deviceFollowTags || "")) {
-        savingRef.current = true;
-        try {
-          await updatePackagePrefs(pkg.packageId, {
-            followTags: val || undefined,
-          });
-        } finally {
-          savingRef.current = false;
-        }
-      }
-    };
-  }
+  const effectiveFollowTags = effective.followTags || "stable";
+  const followTagsValue = effectiveFollowTags === "stable,beta" ? "stable,beta" : "stable";
 
   const activeVersion = usePromise(
     async () => {
@@ -87,7 +58,6 @@ export const PackageInfo = (props: {
       const all = await PackageVersions().list({ packageId: pkg.packageId });
       const active = all.find((v) => v.packageVersionId === activeVersionId);
       if (!active?.version) return "uptodate";
-      const effectiveFollowTags = deviceFollowTags || followVersionTags;
       const parse = (v: string) => v.split(".").map(Number);
       const [aMaj, aMin, aPat] = parse(active.version);
       let highest: "major" | "minor" | "patch" | null = null;
@@ -118,7 +88,7 @@ export const PackageInfo = (props: {
       return highest || "uptodate";
     },
     undefined,
-    [activeVersionId, pkg.packageId, followVersionTags, deviceFollowTags],
+    [activeVersionId, pkg.packageId, effectiveFollowTags],
   );
 
   const remoteRepoUrl = pkg.remoteRepo;
@@ -217,18 +187,20 @@ export const PackageInfo = (props: {
 
         <div className="mb-3">
           <small>
-            Auto-Update Range (this device):
-            <Tooltip markdownContent="Controls which new versions are auto-activated on this device. **Pinned** = never auto-update. **Patch** = same major.minor (e.g. 1.2.x). **Minor** = same major (e.g. 1.x.x). **Latest** = always auto-update to newest." />
+            Auto-Update Range:
+            <Tooltip markdownContent="Controls which new versions are auto-activated for the group. When an admin device auto-upgrades, the group's active version advances for everyone. **Pinned** = never auto-update. **Patch** = same major.minor (e.g. 1.2.x). **Minor** = same major (e.g. 1.x.x). **Latest** = always auto-update to newest." />
           </small>
           <select
             className="form-select form-select-sm"
-            value={isPinned ? "pinned" : followRange}
+            value={groupRange}
             onChange={async (e) => {
               const val = e.target.value as "pinned" | "patch" | "minor" | "latest";
-              await updatePackagePrefs(pkg.packageId, {
-                pinned: val === "pinned",
-                followRange: val === "pinned" ? undefined : val,
-              });
+              const current = await Packages().get(pkg.packageId);
+              if (current) {
+                current.versionFollowRange = val;
+                await Packages().signAndSave(current);
+                await pkg.load();
+              }
             }}
           >
             <option value="latest">Latest (auto-update to newest)</option>
@@ -238,31 +210,114 @@ export const PackageInfo = (props: {
           </select>
         </div>
 
-        <div className={`mb-3 ${isPinned ? "opacity-50" : ""}`}>
+        <div className={`mb-3 ${groupRange === "pinned" ? "opacity-50" : ""}`}>
           <small>
-            Follow Version Tags (this device):
-            <Tooltip markdownContent="Which version tags to auto-activate on this device. Leave empty to follow the group's tag policy. Use `*` for any tag, or a comma-separated list like `stable,beta`." />
+            Following:
+            <Tooltip markdownContent="Which release channel the group follows. Devices using group settings will auto-upgrade within this channel. **Stable** = only fully promoted releases. **Stable + Beta** = also includes beta pre-releases for early testing." />
           </small>
-          <div className="d-flex align-items-center gap-2">
+          <select
+            className="form-select form-select-sm"
+            value={groupFollowTags}
+            disabled={groupRange === "pinned"}
+            onChange={async (e) => {
+              const val = e.target.value;
+              const current = await Packages().get(pkg.packageId);
+              if (current) {
+                current.followVersionTags = val === "stable" ? undefined : val;
+                await Packages().signAndSave(current);
+                await pkg.load();
+              }
+            }}
+          >
+            <option value="stable">Stable</option>
+            <option value="stable,beta">Stable + Beta</option>
+          </select>
+        </div>
+
+        <div className="mb-3">
+          <div className="form-check">
             <input
-              type="text"
-              className="form-control form-control-sm p-0 ps-2"
-              placeholder={`Following "${activeVersion?.versionTag || "stable"}"`}
-              value={deviceTagDraft}
-              onChange={(e) => setDeviceTagDraft(e.target.value)}
-              disabled={isPinned}
+              className="form-check-input"
+              type="checkbox"
+              id={`deviceOverride_${pkg.packageId}`}
+              checked={hasOverride}
+              onChange={async (e) => {
+                if (e.target.checked) {
+                  await updatePackagePrefs(pkg.packageId, {
+                    followRange:
+                      groupRange === "pinned"
+                        ? undefined
+                        : (groupRange as "patch" | "minor" | "latest"),
+                    followTags: followVersionTags || undefined,
+                    pinned: groupRange === "pinned" ? true : undefined,
+                  });
+                } else {
+                  await updatePackagePrefs(pkg.packageId, {
+                    followRange: undefined,
+                    followTags: undefined,
+                    pinned: undefined,
+                  });
+                }
+              }}
             />
-            {deviceTagDraft && (
-              <button
-                className="btn btn-sm btn-outline-secondary"
-                title="Clear device tag override"
-                onClick={() => setDeviceTagDraft("")}
-              >
-                <i className="bi bi-x-lg"></i>
-              </button>
-            )}
+            <label className="form-check-label" htmlFor={`deviceOverride_${pkg.packageId}`}>
+              <small>Override on this device</small>
+            </label>
+            <small>
+              <Tooltip
+                markdownContent={`**Off:** This device follows the group's auto-update and channel settings. When an admin device upgrades, the group's active version advances for all devices.\n\n**On:** This device uses its own settings below. Upgrades only affect this device — the group's active version is not changed.`}
+              />
+            </small>
           </div>
         </div>
+
+        {hasOverride && (
+          <div className="ps-3 border-start mb-3">
+            <div className="mb-3">
+              <small>
+                Auto-Update Range (this device):
+                <Tooltip markdownContent="Controls which new versions are auto-activated on **this device only**. Upgrades here do not change the group's active version." />
+              </small>
+              <select
+                className="form-select form-select-sm"
+                value={isPinned ? "pinned" : followRange}
+                onChange={async (e) => {
+                  const val = e.target.value as "pinned" | "patch" | "minor" | "latest";
+                  await updatePackagePrefs(pkg.packageId, {
+                    pinned: val === "pinned",
+                    followRange: val === "pinned" ? undefined : val,
+                  });
+                }}
+              >
+                <option value="latest">Latest (auto-update to newest)</option>
+                <option value="minor">Minor (same major version)</option>
+                <option value="patch">Patch (same major.minor version)</option>
+                <option value="pinned">Pinned (no auto-updates)</option>
+              </select>
+            </div>
+
+            <div className={isPinned ? "opacity-50" : ""}>
+              <small>
+                Following (this device):
+                <Tooltip markdownContent="Which release channel to follow on **this device only**, overriding the group setting." />
+              </small>
+              <select
+                className="form-select form-select-sm"
+                value={followTagsValue}
+                disabled={isPinned}
+                onChange={async (e) => {
+                  const val = e.target.value;
+                  await updatePackagePrefs(pkg.packageId, {
+                    followTags: val === "stable" ? "stable" : val,
+                  });
+                }}
+              >
+                <option value="stable">Stable</option>
+                <option value="stable,beta">Stable + Beta</option>
+              </select>
+            </div>
+          </div>
+        )}
       </div>
 
       <div className="mt-2">

package/src/screens/packages/package-list.tsx

@@ -1,12 +1,15 @@
 import {
-  doesTagMatch,
+  getEffectivePackagePrefs,
   type ICursorIterable,
   type IPackage,
+  type IPackageVersion,
   observable,
   Packages,
   PackageVersions,
+  packagePrefsVar,
   packagesRootDir,
   rpcServerCalls,
+  updatePackagePrefs,
 } from "@peers-app/peers-sdk";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
@@ -17,88 +20,217 @@ import { Tooltip } from "../../components/tooltip";
 import { isDesktop, mainContentPath } from "../../globals";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import {
+  activatePackageVersion,
+  checkVersionStatus,
+  type IVersionStatus,
+  type UpdateLevel,
+  updateLevelRank,
+} from "./package-helpers";
 
-const PackageVersionBadge = ({
-  activePackageVersionId,
-  packageId,
-  followVersionTags,
-}: {
-  activePackageVersionId?: string;
-  packageId: string;
-  followVersionTags?: string;
-}) => {
-  const data = usePromise(
-    async () => {
-      if (!activePackageVersionId) return null;
-      const all = await PackageVersions().list({ packageId });
-      const active = all.find((v) => v.packageVersionId === activePackageVersionId);
-      if (!active) return null;
+interface IPackageRowStatus extends IVersionStatus {
+  /** When on a dev version, the group's non-dev active PV (if any). */
+  groupReleasePv: IPackageVersion | null;
+  /** When on a non-dev version, the latest dev PV (if any). */
+  latestDevPv: IPackageVersion | null;
+}
 
-      let newerLevel: "major" | "minor" | "patch" | null = null;
-      if (active.version) {
-        const parse = (v: string) => v.split(".").map(Number);
-        const [aMaj, aMin, aPat] = parse(active.version);
-        for (const v of all) {
-          if (!v.version || v.packageVersionId === activePackageVersionId) continue;
-          if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, undefined))
-            continue;
-          const [maj, min, pat] = parse(v.version);
-          if (maj > aMaj) {
-            newerLevel = "major";
-            break;
-          }
-          if (maj === aMaj && min > aMin) {
-            newerLevel = "minor";
-            continue;
-          }
-          if (maj === aMaj && min === aMin && pat > aPat && !newerLevel) {
-            newerLevel = "patch";
-            continue;
-          }
-          if (
-            maj === aMaj &&
-            min === aMin &&
-            pat === aPat &&
-            (v.createdAt || "") > (active.createdAt || "") &&
-            !newerLevel
-          ) {
-            newerLevel = "patch";
+function tagBadgeClass(tag: string): string {
+  if (tag === "dev") return "text-bg-danger";
+  if (tag.startsWith("beta")) return "text-bg-warning";
+  return "text-bg-success";
+}
+
+function updateBadgeClass(level: UpdateLevel): string {
+  if (level === "major") return "text-bg-danger";
+  if (level === "minor") return "text-bg-warning";
+  return "text-bg-info";
+}
+
+const PackageRow = ({ pkg, onUpdated }: { pkg: IPackage; onUpdated: () => void }) => {
+  const [updating, setUpdating] = useState(false);
+  const [devicePrefs] = useObservable(packagePrefsVar(pkg.packageId));
+  const effective = getEffectivePackagePrefs(pkg, devicePrefs);
+
+  const status = usePromise(
+    async (): Promise<IPackageRowStatus | null> => {
+      if (!effective.activePackageVersionId) return null;
+      const s = await checkVersionStatus(
+        pkg.packageId,
+        effective.activePackageVersionId,
+        effective.followTags,
+      );
+      if (!s) return null;
+
+      let groupReleasePv: IPackageVersion | null = null;
+      if (
+        s.activePv.versionTag === "dev" &&
+        pkg.activePackageVersionId &&
+        pkg.activePackageVersionId !== effective.activePackageVersionId
+      ) {
+        try {
+          const gpv = await PackageVersions().get(pkg.activePackageVersionId);
+          if (gpv && gpv.versionTag !== "dev") groupReleasePv = gpv;
+        } catch {}
+      }
+      let latestDevPv: IPackageVersion | null = null;
+      if (s.activePv.versionTag !== "dev") {
+        const allVersions = await PackageVersions().list({ packageId: pkg.packageId });
+        for (const v of allVersions) {
+          if (v.versionTag !== "dev") continue;
+          if (!latestDevPv || (v.createdAt || "") > (latestDevPv.createdAt || "")) {
+            latestDevPv = v;
           }
         }
       }
-      return { pv: active, newerLevel };
+
+      return { ...s, groupReleasePv, latestDevPv };
     },
     undefined,
-    [activePackageVersionId, packageId, followVersionTags],
+    [
+      effective.activePackageVersionId,
+      pkg.packageId,
+      effective.followTags,
+      pkg.activePackageVersionId,
+    ],
   );
 
-  if (!data) return null;
-  const { pv, newerLevel } = data;
+  const isOnDev = status?.activePv.versionTag === "dev";
+  const hasGroupRelease = !!status?.groupReleasePv;
+  const hasUpdate = !isOnDev && !!status?.newerLevel && !!status?.newestPv;
+  const hasDevVersion = !isOnDev && !!status?.latestDevPv;
+  const isDeviceOverridden =
+    !!effective.activePackageVersionId &&
+    !!pkg.activePackageVersionId &&
+    effective.activePackageVersionId !== pkg.activePackageVersionId;
+
+  async function handleUpdate() {
+    if (!status?.newestPv) return;
+    setUpdating(true);
+    try {
+      await activatePackageVersion(pkg.packageId, status.newestPv);
+      onUpdated();
+    } catch (err: unknown) {
+      alert(`Failed to update: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleUseRelease() {
+    setUpdating(true);
+    try {
+      await updatePackagePrefs(pkg.packageId, { activePackageVersionId: undefined });
+      onUpdated();
+    } catch (err: unknown) {
+      alert(`Failed to switch: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleUseDev() {
+    if (!status?.latestDevPv) return;
+    setUpdating(true);
+    try {
+      await updatePackagePrefs(pkg.packageId, {
+        activePackageVersionId: status.latestDevPv.packageVersionId,
+      });
+      onUpdated();
+    } catch (err: unknown) {
+      alert(`Failed to switch: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setUpdating(false);
+    }
+  }
 
   return (
-    <span className="ms-2">
-      <small className="text-muted">v{pv.version}</small>
-      {pv.versionTag && (
-        <span
-          className={`badge ms-1 ${pv.versionTag === "dev" ? "text-bg-danger" : pv.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-success"}`}
-          style={{ fontSize: "0.65em" }}
+    <div className="container-fluid pb-4 d-flex align-items-center">
+      <div className="flex-grow-1" style={{ minWidth: 0 }}>
+        <i className="bi bi-box-fill"></i>&nbsp;&nbsp;
+        <a href={`#packages/${pkg.packageId}`}>{pkg.name}</a>
+        {isDeviceOverridden && (
+          <span
+            className="text-warning ms-1"
+            title="This device is using a different version than the group"
+          >
+            <i className="bi bi-pc-display" />
+          </span>
+        )}
+        {status && (
+          <span className="ms-2">
+            <small className="text-muted">v{status.activePv.version}</small>
+            {status.activePv.versionTag && (
+              <span
+                className={`badge ms-1 ${tagBadgeClass(status.activePv.versionTag)}`}
+                style={{ fontSize: "0.65em" }}
+              >
+                {status.activePv.versionTag}
+              </span>
+            )}
+            {hasUpdate ? (
+              <span
+                className={`badge ms-1 ${updateBadgeClass(status.newerLevel)}`}
+                style={{ fontSize: "0.65em" }}
+              >
+                v{status.newestPv?.version} available
+              </span>
+            ) : isOnDev && hasGroupRelease ? (
+              <span className="badge ms-1 text-bg-secondary" style={{ fontSize: "0.65em" }}>
+                release: v{status.groupReleasePv?.version}
+              </span>
+            ) : (
+              <span className="badge ms-1 text-bg-success" style={{ fontSize: "0.65em" }}>
+                up to date
+              </span>
+            )}
+          </span>
+        )}
+        <Tooltip markdownContent={pkg.description} positions={["bottom", "top", "right", "left"]} />
+      </div>
+      {hasUpdate && (
+        <button
+          className="btn btn-sm btn-outline-primary ms-2 text-nowrap"
+          disabled={updating}
+          onClick={handleUpdate}
         >
-          {pv.versionTag}
-        </span>
+          {updating ? (
+            <span className="spinner-border spinner-border-sm me-1" />
+          ) : (
+            <i className="bi bi-arrow-up-circle me-1" />
+          )}
+          Update
+        </button>
       )}
-      {newerLevel ? (
-        <span
-          className={`badge ms-1 text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`}
-          style={{ fontSize: "0.65em" }}
+      {isOnDev && hasGroupRelease && (
+        <button
+          className="btn btn-sm btn-outline-secondary ms-2 text-nowrap"
+          disabled={updating}
+          onClick={handleUseRelease}
+        >
+          {updating ? (
+            <span className="spinner-border spinner-border-sm me-1" />
+          ) : (
+            <i className="bi bi-box-arrow-in-right me-1" />
+          )}
+          Use Release
+        </button>
+      )}
+      {hasDevVersion && (
+        <button
+          className="btn btn-sm btn-outline-danger ms-2 text-nowrap"
+          disabled={updating}
+          onClick={handleUseDev}
         >
-          {newerLevel} update
-        </span>
-      ) : (
-        <span className="badge ms-1 text-bg-success" style={{ fontSize: "0.65em" }}>
-          up to date
-        </span>
+          {updating ? (
+            <span className="spinner-border spinner-border-sm me-1" />
+          ) : (
+            <i className="bi bi-tools me-1" />
+          )}
+          Use Dev
+        </button>
       )}
-    </span>
+    </div>
   );
 };
 
@@ -106,6 +238,7 @@ export const PackageList = () => {
   const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
   const addingPackage = useObservableState(false);
+  const refreshKey = useObservableState(0);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<IPackage> | undefined>());
 
@@ -140,6 +273,44 @@ export const PackageList = () => {
     if (moreMatches.length === 0) {
       cursorObs(undefined);
     }
+
+    if (!searchText.length && existing.length === 0 && moreMatches.length > 0) {
+      const DEV_WITH_RELEASE_RANK = 0.5;
+      const rankMap = new Map<string, number>();
+      await Promise.all(
+        moreMatches.map(async (pkg) => {
+          try {
+            const pVar = packagePrefsVar(pkg.packageId);
+            await pVar.loadingPromise;
+            const eff = getEffectivePackagePrefs(pkg, pVar());
+            if (!eff.activePackageVersionId) return;
+            const s = await checkVersionStatus(
+              pkg.packageId,
+              eff.activePackageVersionId,
+              eff.followTags,
+            );
+            if (!s) return;
+            if (s.newerLevel) {
+              rankMap.set(pkg.packageId, updateLevelRank[s.newerLevel]);
+            } else if (s.activePv.versionTag === "dev" && pkg.activePackageVersionId) {
+              try {
+                const gpv = await PackageVersions().get(pkg.activePackageVersionId);
+                if (gpv && gpv.versionTag !== "dev") {
+                  rankMap.set(pkg.packageId, DEV_WITH_RELEASE_RANK);
+                }
+              } catch {}
+            }
+          } catch {}
+        }),
+      );
+      moreMatches.sort((a, b) => {
+        const aRank = rankMap.get(a.packageId) ?? 0;
+        const bRank = rankMap.get(b.packageId) ?? 0;
+        if (bRank !== aRank) return bRank - aRank;
+        return (a.name || "").localeCompare(b.name || "");
+      });
+    }
+
     return moreMatches;
   }
 
@@ -148,7 +319,6 @@ export const PackageList = () => {
     const name = searchText.trim();
     if (!name) return;
 
-    // check if name is a remote repo url
     if (name.startsWith("http") || name.endsWith(".git")) {
       if (!confirm(`Add remote package: ${name}`)) return;
       try {
@@ -160,7 +330,6 @@ export const PackageList = () => {
         }
       } catch (err: unknown) {
         let errMessage = err instanceof Error ? err.message : String(err);
-        // replace all whitespace with a single space for confirm dialog
         errMessage = errMessage.replace(/\s+/g, " ");
         confirm(`Error adding remote package: ${errMessage}`);
       } finally {
@@ -261,27 +430,17 @@ export const PackageList = () => {
 
       <div className="peers-list-container">
         <LazyList
-          resetTrigger={searchText}
+          resetTrigger={`${searchText}_${refreshKey()}`}
           loadMore={loadMore}
           scrollThreshold={0.6}
           renderItems={(packages) => {
-            return packages.map((pkg) => {
-              return (
-                <div key={pkg.packageId} className="container-fluid pb-4">
-                  <i className="bi bi-box-fill"></i>&nbsp;&nbsp;
-                  <a href={`#packages/${pkg.packageId}`}>{pkg.name}</a>
-                  <PackageVersionBadge
-                    activePackageVersionId={pkg.activePackageVersionId}
-                    packageId={pkg.packageId}
-                    followVersionTags={pkg.followVersionTags}
-                  />
-                  <Tooltip
-                    markdownContent={pkg.description}
-                    positions={["bottom", "top", "right", "left"]}
-                  />
-                </div>
-              );
-            });
+            return packages.map((pkg) => (
+              <PackageRow
+                key={pkg.packageId}
+                pkg={pkg}
+                onUpdated={() => refreshKey(refreshKey() + 1)}
+              />
+            ));
           }}
           loadingIndicator={
             <div className="d-flex justify-content-center" style={{ height: 200 }}>