@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,354 +0,0 @@
-import {
-  doesTagMatch,
-  getEffectivePackagePrefs,
-  groupDeviceVar,
-  hasDeviceFollowOverride,
-  type IDoc,
-  type IPackage,
-  type IPackageVersion,
-  Packages,
-  PackageVersions,
-  packagePrefsVar,
-  packagesRootDir,
-  updatePackagePrefs,
-} from "@peers-app/peers-sdk";
-import { Input } from "../../components/input";
-import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
-import { Tooltip } from "../../components/tooltip";
-import { useObservable, usePromise } from "../../hooks";
-import { openInEditorOnHost, openOnHost } from "../../host-shell/host-shell-consumer";
-import { PackageNetworkPanel } from "./package-network-panel";
-
-/** 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}`,
-  });
-  const [localPath, setLocalPath] = useObservable(localPathVar);
-
-  const [devicePrefs] = useObservable(packagePrefsVar(pkg.packageId));
-  const effective = getEffectivePackagePrefs(pkg.toJS(), devicePrefs);
-  const activeVersionId = effective.activePackageVersionId;
-  const isPinned = effective.isPinned;
-  const followRange = effective.followRange;
-
-  const hasOverride = hasDeviceFollowOverride(devicePrefs);
-
-  const groupFollowTags = followVersionTags === "stable,beta" ? "stable,beta" : "stable";
-  const groupRange = versionFollowRange || "latest";
-
-  const effectiveFollowTags = effective.followTags || "stable";
-  const followTagsValue = effectiveFollowTags === "stable,beta" ? "stable,beta" : "stable";
-
-  const activeVersion = usePromise(
-    async () => {
-      if (!activeVersionId) return null;
-      return PackageVersions().get(activeVersionId) as Promise<IPackageVersion | null>;
-    },
-    undefined,
-    [activeVersionId],
-  );
-
-  const newerLevel = usePromise(
-    async (): Promise<"major" | "minor" | "patch" | "uptodate"> => {
-      if (!activeVersionId) return "uptodate";
-      const all = await PackageVersions().list({ packageId: pkg.packageId });
-      const active = all.find((v) => v.packageVersionId === activeVersionId);
-      if (!active?.version) return "uptodate";
-      const parse = (v: string) => v.split(".").map(Number);
-      const [aMaj, aMin, aPat] = parse(active.version);
-      let highest: "major" | "minor" | "patch" | null = null;
-      for (const v of all) {
-        if (!v.version || v.packageVersionId === activeVersionId) continue;
-        if (!doesTagMatch(active.versionTag, v.versionTag, effectiveFollowTags, undefined))
-          continue;
-        const [maj, min, pat] = parse(v.version);
-        if (maj > aMaj) return "major";
-        if (maj === aMaj && min > aMin) {
-          highest = "minor";
-          continue;
-        }
-        if (maj === aMaj && min === aMin && pat > aPat && !highest) {
-          highest = "patch";
-          continue;
-        }
-        if (
-          maj === aMaj &&
-          min === aMin &&
-          pat === aPat &&
-          (v.createdAt || "") > (active.createdAt || "") &&
-          !highest
-        ) {
-          highest = "patch";
-        }
-      }
-      return highest || "uptodate";
-    },
-    undefined,
-    [activeVersionId, pkg.packageId, effectiveFollowTags],
-  );
-
-  const remoteRepoUrl = pkg.remoteRepo;
-
-  return (
-    <div>
-      <small>Name:</small>
-      <Input
-        value={pkg.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Package name"
-        title="Package name"
-        disabled
-      />
-
-      <div className="mt-2">
-        <small>
-          Local Path:
-          <small>
-            <Tooltip
-              markdownContent={`The local path to the directory containing the package.  This will open in VS Code if it's installed otherwise this will open in your native file system`}
-            />
-            <button
-              className="btn btn-sm btn-link"
-              onClick={() => {
-                void openInEditorOnHost(localPath || packagesRootDir);
-              }}
-            >
-              Open Local
-            </button>
-          </small>
-        </small>
-        <input
-          type="text"
-          className="form-control mb-3 p-0 ps-2"
-          placeholder="~/peers/packages/my-package"
-          value={localPath || ""}
-          onChange={(e) => setLocalPath(e.target.value)}
-        />
-      </div>
-
-      {remoteRepoUrl ? (
-        <div className="mt-2">
-          <small>
-            Source URL:
-            <small>
-              <Tooltip
-                markdownContent={`The remote source of this package.  Often a github repository URL or a link to the Peers page for the package.`}
-              />
-              <button
-                className="btn btn-sm btn-link"
-                onClick={() => {
-                  void openOnHost(remoteRepoUrl);
-                }}
-              >
-                Open Remote
-              </button>
-            </small>
-          </small>
-          <Input value={pkg.qs.remoteRepo} className="form-control mb-3 p-0 ps-2" disabled />
-        </div>
-      ) : null}
-
-      <div className="mt-2">
-        <small>
-          Update URL:
-          <small>
-            <Tooltip
-              markdownContent={`Base URL for remote package updates. Admin devices poll **<updateUrl>/latest-<tag>.json** on startup (for example **latest-stable.json**). Signed artifacts must be published to this host separately — for example via the publish-package tool or the peers-core full-release pipeline.`}
-            />
-          </small>
-        </small>
-        <Input
-          value={pkg.qs.updateUrl}
-          className="form-control mb-3 p-0 ps-2"
-          placeholder="https://example.com/my-package"
-          title="Update URL"
-        />
-      </div>
-
-      <div className="mt-2">
-        <hr />
-        <small>
-          Version:
-          <Tooltip markdownContent="The currently active version of this package. Manage versions in the Versions tab." />
-        </small>
-        {activeVersion ? (
-          <div className="d-flex align-items-center mt-1 mb-3">
-            <strong className="me-2">v{activeVersion.version}</strong>
-            {activeVersion.versionTag && (
-              <span
-                className={`badge ${activeVersion.versionTag === "dev" ? "text-bg-danger" : activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-success"} me-2`}
-              >
-                {activeVersion.versionTag}
-              </span>
-            )}
-            <code className="text-muted small me-2">
-              {activeVersion.packageVersionHash?.substring(0, 8)}
-            </code>
-            {newerLevel === "uptodate" ? (
-              <span className="badge text-bg-success">Up to date</span>
-            ) : newerLevel ? (
-              <span
-                className={`badge text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`}
-              >
-                Newer {newerLevel} version available
-              </span>
-            ) : null}
-          </div>
-        ) : (
-          <div className="text-muted small mt-1 mb-3">No active version</div>
-        )}
-
-        <div className="mb-3">
-          <small>
-            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={groupRange}
-            onChange={async (e) => {
-              const val = e.target.value as "pinned" | "patch" | "minor" | "latest";
-              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>
-            <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={`mb-3 ${groupRange === "pinned" ? "opacity-50" : ""}`}>
-          <small>
-            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>
-          <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
-              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,
-                  });
-                }
-              }}
-            />
-            <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">
-        <hr />
-        <small>
-          Description:
-          <Tooltip
-            markdownContent={`This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.`}
-          />
-        </small>
-        <MarkdownWithMentions content={pkg.description || ""} />
-      </div>
-      <PackageNetworkPanel packageId={pkg.packageId} />
-    </div>
-  );
-};