@hot-updater/console 1.0.0-rc.9 → 1.0.0

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

@@ -2,6 +2,13 @@ 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,
@@ -11,6 +18,7 @@ import {
   ComboboxList,
 } from "@/components/ui/combobox";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -20,20 +28,34 @@ import {
   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({
-  onScopeChange,
+  onFiltersChange,
   scope,
+  releaseScope,
   appVersions,
 }: {
-  readonly onScopeChange: (scope: AppUsageScope) => void;
+  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 [appVersion, setAppVersion] = useState(scope.appVersion ?? "");
+  const [releasePlatform, setReleasePlatform] = useState(releaseScope.platform);
+  const [releaseId, setReleaseId] = useState(releaseScope.releaseId ?? "");
   const versions = [
     ...new Set([...appVersions, ...(appVersion ? [appVersion] : [])]),
   ];
@@ -41,146 +63,222 @@ export function InsightsControls({
   const channels = channelsQuery.data?.map((item) => item.name) ?? [];
 
   return (
-    <form
-      aria-label="Insights controls"
-      onSubmit={(event) => {
-        event.preventDefault();
-        onScopeChange({
-          platform,
-          channel,
-          ...(appVersion ? { appVersion } : {}),
-        });
-      }}
-    >
-      <FieldGroup className="grid grid-cols-2 items-end gap-4 lg:grid-cols-[9rem_minmax(0,1fr)_minmax(0,1fr)_auto]">
-        <Field>
-          <FieldLabel htmlFor="insights-platform">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-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 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>
-        <Button
-          className="h-11 sm:h-9"
-          size="lg"
-          type="submit"
-          variant="outline"
+    <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() } : {}),
+              },
+            });
+          }}
         >
-          Apply filters
-        </Button>
-      </FieldGroup>
-    </form>
+          <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"
+            >
+              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" />