@sentry/junior-dashboard 0.266.0 → 0.268.0

package/src/client/pages/automations/AutomationVersionsPage.tsx

@@ -1,390 +0,0 @@
-/** Version history for one Automation. Making a version active saves it again. */
-import { useState } from "react";
-import { ArrowLeft, ChevronRight } from "lucide-react";
-import { Link, Navigate, useParams, useSearchParams } from "react-router";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import {
-  automationEditSchema,
-  type AutomationSummary,
-  type AutomationVersionList,
-  type ListedAutomationVersion,
-} from "@sentry/junior/api/schema";
-import { useAutomationData, useAutomationVersionsData } from "../../api";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogTitle,
-} from "../../components/ui/alert-dialog";
-import { Button } from "../../components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../components/ui/collapsible";
-import { dashboardDisclosureChevronClass } from "../../styles";
-import { Detail, DetailList } from "../../components/DetailList";
-import { FormNotice } from "../../components/FormNotice";
-import { InlineError } from "../../components/InlineError";
-import { PageContentSkeleton } from "../../components/PageContentSkeleton";
-import { StatusChip } from "../../components/StatusChip";
-import { Card } from "../../components/layout/Card";
-import { PageHeader } from "../../components/layout/PageHeader";
-import { automationPath } from "../../format";
-import { DashboardApiError, fetchDashboardJson, post } from "../../http";
-import { pathWithSearch } from "../../searchParams";
-import { formatAutomationRunTime } from "./automationFormat";
-import { automationOutcomeLabel } from "./automationOutcomes";
-import { TriggerFilters } from "./TriggerFilters";
-
-const DESCRIPTION = "Saved settings for this automation, newest first.";
-
-/** Load one Automation's versions with its summary for labels and access. */
-export function AutomationVersionsPage(props: { enabled: boolean }) {
-  const { automationId } = useParams();
-  const [searchParams] = useSearchParams();
-  const summary = useAutomationData(props.enabled, automationId);
-  const versions = useAutomationVersionsData(props.enabled, automationId);
-  if (!automationId) {
-    return <Navigate replace to="/automations" />;
-  }
-  const backTo = pathWithSearch(automationPath(automationId), searchParams);
-  const error = summary.error ?? versions.error;
-  const notFound = error instanceof DashboardApiError && error.status === 404;
-  if (error || notFound) {
-    return (
-      <>
-        <PageHeader description={DESCRIPTION} title="Version history" />
-        <Card padding="md">
-          <InlineError>
-            {notFound
-              ? "This automation was not found or is not visible to you."
-              : "Version history could not be loaded. Try again."}
-          </InlineError>
-          <BackLink to={backTo} />
-        </Card>
-      </>
-    );
-  }
-  if (!summary.data || !versions.data) {
-    return (
-      <>
-        <PageHeader description={DESCRIPTION} title="Version history" />
-        <PageContentSkeleton label="Loading version history" variant="list" />
-      </>
-    );
-  }
-  return (
-    <AutomationVersionsView
-      automation={summary.data}
-      backTo={backTo}
-      data={versions.data}
-    />
-  );
-}
-
-function BackLink(props: { to: string }) {
-  return (
-    <Link
-      className="mb-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
-      to={props.to}
-    >
-      <ArrowLeft aria-hidden="true" size={14} />
-      Back to automation
-    </Link>
-  );
-}
-
-function AutomationVersionsView(props: {
-  automation: AutomationSummary;
-  backTo: string;
-  data: AutomationVersionList;
-}) {
-  const { automation, data } = props;
-  const queryClient = useQueryClient();
-  const [activated, setActivated] = useState<number>();
-  // Keep the version after close so the closing dialog keeps its text.
-  const [confirming, setConfirming] = useState<number>();
-  const [confirmOpen, setConfirmOpen] = useState(false);
-  const canActivate = !(
-    automation.kind === "scheduled" && automation.status === "completed"
-  );
-  const path = `/api/automations/${encodeURIComponent(automation.id)}`;
-  const activate = useMutation({
-    mutationFn: async (version: number) => {
-      // The user chose an exact saved version, so the latest revision is safe here.
-      const current = await fetchDashboardJson(
-        automationEditSchema,
-        `${path}/edit`,
-      );
-      return post(
-        automationEditSchema,
-        `${path}/versions/${version}/activate`,
-        { revision: current.revision },
-      );
-    },
-    onMutate: () => setActivated(undefined),
-    onSuccess: async (_, version) => {
-      setActivated(version);
-      await queryClient.invalidateQueries({
-        queryKey: ["dashboard", "automations"],
-      });
-    },
-  });
-  return (
-    <>
-      <div>
-        <BackLink to={props.backTo} />
-        <PageHeader
-          description={`${automation.kind} automation · ${automation.destination.label} · ${data.versions.length} ${data.versions.length === 1 ? "version" : "versions"}`}
-          documentTitle={`${automation.title} · Version history`}
-          title={automation.title}
-        />
-      </div>
-      <p className="m-0 max-w-2xl text-sm leading-relaxed text-dashboard-text-muted">
-        {canActivate
-          ? "Making a version active saves its settings as a new version. Earlier versions stay in this list. It does not run the automation."
-          : "This automation has completed. Its versions are read-only."}
-      </p>
-      {activated !== undefined ? (
-        <p role="status" className="m-0 text-sm text-emerald-300">
-          Version {activated} is active again. It was saved as a new version.
-        </p>
-      ) : null}
-      {data.versions.length === 0 ? (
-        <Card padding="md">
-          <p className="m-0 text-sm text-dashboard-text-muted">
-            No versions are saved yet. Junior saves a version each time the
-            settings change.
-          </p>
-        </Card>
-      ) : (
-        <Card>
-          <ol className="m-0 list-none divide-y divide-dashboard-border-subtle p-0">
-            {data.versions.map((version, index) => (
-              <VersionRow
-                key={version.version}
-                active={version.version === data.activeVersion}
-                automation={automation}
-                canActivate={canActivate}
-                error={
-                  activate.variables === version.version ? activate.error : null
-                }
-                onActivate={() => {
-                  setConfirming(version.version);
-                  setConfirmOpen(true);
-                }}
-                pending={
-                  activate.isPending && activate.variables === version.version
-                }
-                previous={data.versions[index + 1]}
-                truncated={data.truncated}
-                version={version}
-              />
-            ))}
-          </ol>
-        </Card>
-      )}
-      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>
-        <AlertDialogContent>
-          <AlertDialogTitle>Make version {confirming} active?</AlertDialogTitle>
-          <AlertDialogDescription>
-            Junior saves these settings as a new version. Future runs use them.
-            {automation.ownedByViewer
-              ? null
-              : ` Only ${automation.createdBy} can turn on their connected accounts or change where results go.`}
-          </AlertDialogDescription>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (confirming !== undefined) activate.mutate(confirming);
-                setConfirmOpen(false);
-              }}
-              variant="primary"
-            >
-              Make active
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-      {data.truncated ? (
-        <p className="m-0 text-center text-xs text-dashboard-text-muted">
-          Showing the 100 most recent versions.
-        </p>
-      ) : null}
-    </>
-  );
-}
-
-function VersionRow(props: {
-  active: boolean;
-  automation: AutomationSummary;
-  canActivate: boolean;
-  error: Error | null;
-  onActivate(): void;
-  pending: boolean;
-  previous: ListedAutomationVersion | undefined;
-  truncated: boolean;
-  version: ListedAutomationVersion;
-}) {
-  const { automation, version } = props;
-  const editor = version.editedBy
-    ? (version.editedBy.fullName ??
-      version.editedBy.userName ??
-      version.editedBy.slackUserId)
-    : "Editor unknown";
-  const changes = props.previous
-    ? changedFields(props.previous, version)
-    : undefined;
-  const changeText = changes
-    ? changes.length
-      ? `Changed ${changes.join(", ")}`
-      : "No setting changes"
-    : version.version === 1 || !props.truncated
-      ? "First saved version"
-      : undefined;
-  const titleId = `automation-version-${version.version}`;
-  return (
-    <li aria-labelledby={titleId} className="grid gap-3 px-4 py-4 sm:px-5">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex flex-wrap items-center gap-3">
-            <h3 id={titleId} className="m-0 text-sm font-medium">
-              Version {version.version}
-            </h3>
-            {props.active ? (
-              <StatusChip size="compact" tone="success">
-                Active
-              </StatusChip>
-            ) : null}
-          </div>
-          <p className="mt-1 mb-0 text-xs text-dashboard-text-muted">
-            {editor} · {formatAutomationRunTime(version.createdAt)}
-          </p>
-          {changeText ? (
-            <p className="mt-1 mb-0 text-xs text-dashboard-text-muted">
-              {changeText}
-            </p>
-          ) : null}
-        </div>
-        {props.canActivate && !props.active ? (
-          <Button
-            aria-label={`Make version ${version.version} active`}
-            disabled={props.pending}
-            onClick={props.onActivate}
-          >
-            {props.pending ? "Saving…" : "Make active"}
-          </Button>
-        ) : null}
-      </div>
-      {props.error ? (
-        <FormNotice tone="error" title="This version could not be made active.">
-          {props.error instanceof DashboardApiError
-            ? props.error.code === "conflict"
-              ? "The automation changed. Try again."
-              : (props.error.apiError ?? "Try again.")
-            : "Try again."}
-        </FormNotice>
-      ) : null}
-      <Collapsible>
-        <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 py-1 text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline focus-visible:outline-dashboard-focus">
-          <ChevronRight
-            aria-hidden="true"
-            className={dashboardDisclosureChevronClass}
-          />
-          Show settings
-        </CollapsibleTrigger>
-        <CollapsibleContent hiddenUntilFound>
-          <VersionSettings automation={automation} version={version} />
-        </CollapsibleContent>
-      </Collapsible>
-    </li>
-  );
-}
-
-function VersionSettings(props: {
-  automation: AutomationSummary;
-  version: ListedAutomationVersion;
-}) {
-  const { automation, version } = props;
-  const { definition } = version;
-  const destination =
-    definition.destination.channelId === automation.destination.channelId &&
-    definition.destination.teamId === automation.destination.teamId
-      ? automation.destination.label
-      : `Another destination · ${definition.destination.channelId}`;
-  return (
-    <DetailList className="mt-2">
-      <Detail label="Title">
-        {definition.title ?? "First line of the instruction"}
-      </Detail>
-      <Detail label="What to do" valueClassName="whitespace-pre-wrap">
-        {definition.instruction}
-      </Detail>
-      <Detail label="When to run">
-        {version.kind === "scheduled" ? (
-          version.definition.schedule.description.includes(
-            version.definition.schedule.timezone,
-          ) ? (
-            version.definition.schedule.description
-          ) : (
-            `${version.definition.schedule.description} (${version.definition.schedule.timezone})`
-          )
-        ) : (
-          <>
-            {version.definition.trigger.label} ·{" "}
-            {version.definition.trigger.identifier}
-            <br />
-            {version.trigger.events.join(", ")}
-            <TriggerFilters filters={version.trigger.filters} />
-          </>
-        )}
-      </Detail>
-      <Detail label="Destination">{destination}</Detail>
-      <Detail label="On success">
-        {definition.outcomes.length ? (
-          <ol className="m-0 grid gap-1 p-0">
-            {definition.outcomes.map((outcome, index) => (
-              <li key={index}>
-                {automationOutcomeLabel(outcome, automation.destination)}
-              </li>
-            ))}
-          </ol>
-        ) : (
-          "No message on success"
-        )}
-      </Detail>
-      <Detail label="Connected accounts">
-        {definition.credentialMode === "creator"
-          ? `Uses accounts connected by ${automation.ownedByViewer ? "you" : automation.createdBy}.`
-          : "System credentials only"}
-      </Detail>
-    </DetailList>
-  );
-}
-
-/** Name the settings that differ from the previous version. */
-function changedFields(
-  previous: ListedAutomationVersion,
-  version: ListedAutomationVersion,
-): string[] {
-  const before: Record<string, unknown> = previous.definition;
-  const after: Record<string, unknown> = version.definition;
-  return (
-    [
-      ["title", "title"],
-      ["instruction", "instruction"],
-      ["schedule", "schedule"],
-      ["trigger", "trigger"],
-      ["destination", "destination"],
-      ["outcomes", "success messages"],
-      ["credentialMode", "connected accounts"],
-    ] as const
-  ).flatMap(([key, label]) =>
-    JSON.stringify(before[key]) === JSON.stringify(after[key]) ? [] : [label],
-  );
-}