@hot-updater/console 1.0.0-rc.2 → 1.0.0-rc.21

package/src/components/features/insights/InsightsControls.tsx

@@ -1,121 +1,284 @@
 import { useState } from "react";
 
+import { PlatformIcon } from "@/components/PlatformIcon";
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import type { InsightsOverviewInput, InsightsWindow } from "@/lib/insights-api";
-
-const windows = [
-  { value: "24h", label: "24 hours", shortLabel: "24h" },
-  { value: "7d", label: "7 days", shortLabel: "7d" },
-  { value: "30d", label: "30 days", shortLabel: "30d" },
-] as const;
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useChannelsQuery } from "@/lib/api";
+import type { RecoveryInput } from "@/lib/insights-recovery";
+import type { AppUsageScope } from "@/lib/insights-usage";
 
 export function InsightsControls({
-  onWindowChange,
-  onScopeChange,
+  onFiltersChange,
   scope,
-  window,
+  releaseScope,
+  appVersions,
 }: {
-  readonly onWindowChange: (window: InsightsWindow) => void;
-  readonly onScopeChange: (
-    scope: Omit<InsightsOverviewInput, "window">,
-  ) => void;
-  readonly scope: Omit<InsightsOverviewInput, "window">;
-  readonly window: InsightsWindow;
+  readonly onFiltersChange: (filters: {
+    readonly scope: AppUsageScope;
+    readonly releaseScope: Pick<
+      RecoveryInput,
+      "platform" | "channel" | "releaseId"
+    >;
+  }) => void;
+  readonly scope: AppUsageScope;
+  readonly releaseScope: Pick<
+    RecoveryInput,
+    "platform" | "channel" | "releaseId"
+  >;
+  readonly appVersions: readonly string[];
 }) {
   const [platform, setPlatform] = useState(scope.platform);
   const [channel, setChannel] = useState(scope.channel);
-  const [bundleId, setBundleId] = useState(scope.bundleId ?? "");
+  const [appVersion, setAppVersion] = useState(scope.appVersion ?? "");
+  const [releasePlatform, setReleasePlatform] = useState(releaseScope.platform);
+  const [releaseId, setReleaseId] = useState(releaseScope.releaseId ?? "");
+  const versions = [
+    ...new Set([...appVersions, ...(appVersion ? [appVersion] : [])]),
+  ];
+  const channelsQuery = useChannelsQuery();
+  const channels = channelsQuery.data?.map((item) => item.name) ?? [];
 
   return (
-    <section aria-label="Insights controls" className="flex flex-col gap-4">
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          onScopeChange({ platform, channel, bundleId: bundleId || undefined });
-        }}
-      >
-        <FieldGroup className="items-end sm:flex-row">
-          <Field className="w-full sm:w-auto">
-            <FieldLabel>Platform</FieldLabel>
-            <ToggleGroup
-              aria-label="Platform"
-              value={[platform]}
-              onValueChange={(value) => {
-                if (value[0] === "ios" || value[0] === "android")
-                  setPlatform(value[0]);
-              }}
-              spacing={0}
-              variant="outline"
-            >
-              <ToggleGroupItem className="h-11 lg:h-8" value="ios">
-                iOS
-              </ToggleGroupItem>
-              <ToggleGroupItem className="h-11 lg:h-8" value="android">
-                Android
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="insights-channel">Channel</FieldLabel>
-            <Input
-              className="h-11 lg:h-8"
-              id="insights-channel"
-              value={channel}
-              onChange={(event) => setChannel(event.target.value)}
-              required
-              maxLength={1024}
-            />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="insights-bundle">
-              Bundle ID (optional)
-            </FieldLabel>
-            <Input
-              className="h-11 lg:h-8"
-              id="insights-bundle"
-              placeholder="Select a bundle by ID"
-              value={bundleId}
-              onChange={(event) => setBundleId(event.target.value)}
-              maxLength={1024}
-            />
-          </Field>
-          <Button
-            className="h-11 w-full sm:w-auto lg:h-8"
-            type="submit"
-            variant="outline"
-          >
-            Apply filters
-          </Button>
-        </FieldGroup>
-      </form>
-      <Field orientation="horizontal" className="w-full">
-        <FieldLabel className="sr-only">Reporting period</FieldLabel>
-        <ToggleGroup
-          aria-label="Reporting period"
-          className="w-full sm:w-fit"
-          onValueChange={(value) => {
-            if (value[0]) onWindowChange(value[0] as InsightsWindow);
+    <Card className="shadow-sm">
+      <CardHeader className="gap-1 border-b px-5 py-4">
+        <CardTitle>Filters</CardTitle>
+        <CardDescription>
+          Channel applies to all reports. Other filters affect the report named
+          in their label.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="px-5 py-4">
+        <form
+          aria-label="Insights filters"
+          onSubmit={(event) => {
+            event.preventDefault();
+            onFiltersChange({
+              scope: {
+                platform,
+                channel,
+                ...(appVersion ? { appVersion } : {}),
+              },
+              releaseScope: {
+                platform: releasePlatform,
+                channel,
+                ...(releaseId.trim() ? { releaseId: releaseId.trim() } : {}),
+              },
+            });
           }}
-          spacing={0}
-          size="lg"
-          value={[window]}
-          variant="outline"
         >
-          {windows.map((item) => (
-            <ToggleGroupItem
-              aria-label={item.label}
-              className="h-11 flex-1 px-4 sm:flex-none lg:h-8 lg:px-2.5"
-              key={item.value}
-              value={item.value}
+          <FieldGroup className="grid grid-cols-1 items-end gap-4 sm:grid-cols-2 xl:grid-cols-[minmax(12rem,1.25fr)_9rem_minmax(10rem,1fr)_9rem_minmax(12rem,1fr)_auto]">
+            <Field className="min-w-0">
+              <FieldLabel htmlFor="insights-channel">Channel</FieldLabel>
+              <Combobox
+                items={channels}
+                value={channel}
+                onValueChange={(value) => {
+                  if (value !== null) setChannel(value);
+                }}
+              >
+                <ComboboxInput
+                  className="h-11 w-full sm:h-9 [&_input]:h-full"
+                  id="insights-channel"
+                  placeholder="Search channels…"
+                  maxLength={1024}
+                />
+                <ComboboxContent>
+                  <ComboboxEmpty>
+                    {channelsQuery.isPending ? (
+                      "Loading channels…"
+                    ) : channelsQuery.isError ? (
+                      <div className="flex flex-col items-center gap-2 p-2">
+                        Couldn't load channels.
+                        <Button
+                          onClick={() => void channelsQuery.refetch()}
+                          size="sm"
+                          variant="outline"
+                        >
+                          Retry channels
+                        </Button>
+                      </div>
+                    ) : (
+                      "No channels found."
+                    )}
+                  </ComboboxEmpty>
+                  <ComboboxList>
+                    {(item: string) => (
+                      <ComboboxItem
+                        className="min-h-11 pr-8 sm:min-h-8"
+                        key={item}
+                        value={item}
+                      >
+                        <span className="truncate">{item}</span>
+                      </ComboboxItem>
+                    )}
+                  </ComboboxList>
+                </ComboboxContent>
+              </Combobox>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="insights-platform">
+                Usage platform
+              </FieldLabel>
+              <Select
+                items={{ all: "All platforms", ios: "iOS", android: "Android" }}
+                value={platform}
+                onValueChange={(value) => {
+                  if (value === "all" || value === "ios" || value === "android")
+                    setPlatform(value);
+                }}
+              >
+                <SelectTrigger
+                  id="insights-platform"
+                  className="min-h-11 w-full sm:min-h-9"
+                >
+                  <SelectValue>
+                    {platform !== "all" ? (
+                      <PlatformIcon platform={platform} className="size-3.5" />
+                    ) : null}
+                    {platform === "all"
+                      ? "All platforms"
+                      : platform === "ios"
+                        ? "iOS"
+                        : "Android"}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="all">All platforms</SelectItem>
+                    <SelectItem value="ios">
+                      <PlatformIcon platform="ios" className="size-3.5" />
+                      iOS
+                    </SelectItem>
+                    <SelectItem value="android">
+                      <PlatformIcon platform="android" className="size-3.5" />
+                      Android
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field className="min-w-0">
+              <FieldLabel htmlFor="insights-app-version">
+                App version
+              </FieldLabel>
+              <Select
+                items={Object.fromEntries([
+                  ["all", "All versions"],
+                  ...versions.map((version) => [`version:${version}`, version]),
+                ])}
+                value={appVersion ? `version:${appVersion}` : "all"}
+                onValueChange={(value) => {
+                  if (value !== null)
+                    setAppVersion(value === "all" ? "" : value.slice(8));
+                }}
+              >
+                <SelectTrigger
+                  id="insights-app-version"
+                  className="min-h-11 w-full sm:min-h-9"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="all">All versions</SelectItem>
+                    {versions.map((version) => (
+                      <SelectItem key={version} value={`version:${version}`}>
+                        {version}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="insights-release-platform">
+                Health platform
+              </FieldLabel>
+              <Select
+                items={{ ios: "iOS", android: "Android" }}
+                value={releasePlatform}
+                onValueChange={(value) => {
+                  if (value === "ios" || value === "android")
+                    setReleasePlatform(value);
+                }}
+              >
+                <SelectTrigger
+                  id="insights-release-platform"
+                  className="min-h-11 w-full sm:min-h-9"
+                >
+                  <SelectValue>
+                    <PlatformIcon
+                      platform={releasePlatform}
+                      className="size-3.5"
+                    />
+                    {releasePlatform === "ios" ? "iOS" : "Android"}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="ios">
+                      <PlatformIcon platform="ios" className="size-3.5" />
+                      iOS
+                    </SelectItem>
+                    <SelectItem value="android">
+                      <PlatformIcon platform="android" className="size-3.5" />
+                      Android
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field className="min-w-0">
+              <FieldLabel htmlFor="insights-release-id">
+                Release ID{" "}
+                <span className="text-muted-foreground">(optional)</span>
+              </FieldLabel>
+              <Input
+                autoComplete="off"
+                className="h-11 sm:h-9"
+                id="insights-release-id"
+                maxLength={1024}
+                name="releaseId"
+                placeholder="All releases…"
+                value={releaseId}
+                onChange={(event) => setReleaseId(event.target.value)}
+              />
+            </Field>
+            <Button
+              className="h-11 w-full sm:h-9"
+              size="lg"
+              type="submit"
+              variant="outline"
             >
-              {item.shortLabel}
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Field>
-    </section>
+              Apply filters
+            </Button>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
   );
 }

package/src/components/features/insights/InsightsErrorAlert.tsx

@@ -1,13 +1,26 @@
-import { TriangleAlert } from "lucide-react";
+import { Info, TriangleAlert } from "lucide-react";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { isConsoleFeatureUnavailableError } from "@/lib/console-features";
 
 export function InsightsErrorAlert({
+  error,
   fallbackTitle,
 }: {
   readonly error: Error;
   readonly fallbackTitle: string;
 }) {
+  // A server restarted without insights() refuses the reads of a page opened
+  // before: that is its setup, not a failure.
+  if (isConsoleFeatureUnavailableError(error)) {
+    return (
+      <Alert>
+        <Info aria-hidden="true" />
+        <AlertTitle>Insights not installed</AlertTitle>
+        <AlertDescription>{error.message}</AlertDescription>
+      </Alert>
+    );
+  }
   return (
     <Alert variant="destructive">
       <TriangleAlert aria-hidden="true" />

package/src/components/features/insights/InsightsInfo.tsx

@@ -0,0 +1,48 @@
+import { InfoIcon } from "lucide-react";
+import { useId, useState, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export function InsightsInfo({
+  label,
+  children,
+}: {
+  readonly label: string;
+  readonly children: ReactNode;
+}) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  return (
+    <Tooltip open={open} onOpenChange={setOpen} triggerId={id}>
+      <TooltipTrigger
+        id={id}
+        aria-describedby={open ? `${id}-description` : undefined}
+        closeOnClick={false}
+        onClick={() => setOpen((value) => !value)}
+        render={
+          <Button
+            aria-label={label}
+            className="size-11 sm:size-7"
+            size="icon"
+            variant="ghost"
+          />
+        }
+      >
+        <InfoIcon />
+      </TooltipTrigger>
+      <TooltipContent
+        id={`${id}-description`}
+        role="tooltip"
+        className="max-w-64"
+        side="bottom"
+      >
+        {children}
+      </TooltipContent>
+    </Tooltip>
+  );
+}