@manta-eu/react 0.3.0 → 0.4.0

package/src/hooks/use-approve-anyway.ts

@@ -1,4 +1,6 @@
 import { useExecuteAgentActionAdditionMutation } from "@manta-eu/client";
+import { entityActionInput } from "@manta-eu/client/shared/action-document";
+import { BrandAssetDecisionSchema } from "@manta-eu/ldo/schemas/brand";
 import { isPresent } from "@manta-eu/lib/present";
 import { isValidFullIri, namespaces } from "@manta-eu/rdf-lib/namespaces";
 import { useQueryClient } from "@tanstack/react-query";
@@ -8,13 +10,12 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { ManualAction } from "./use-manual-actions";
 import { useSparqlSelect } from "./use-sparql-construct";
-import { buildActionDocument, mintSubjectIri } from "#lib/action-document";
+import { mintSubjectIri } from "#lib/action-document";
 import { useMantaClient } from "#providers/MantaClientProvider";
 import { invalidateActionPlanQueries } from "#shared/query-keys";
 
 const df = new DataFactory();
 const assetAnalysis = `${namespaces.brand}AssetAnalysis`;
-const assetDecision = `${namespaces.brand}AssetDecision`;
 const decideAssetShape = `${namespaces.brand}DecideAssetShape`;
 
 export type ApproveAnywayHandle = {
@@ -68,16 +69,12 @@ export function useApproveAnyway(planGraphIri: string): ApproveAnywayHandle {
       if (inFlight.current.has(analysisIri)) return;
       inFlight.current.add(analysisIri);
       setApproving(new Set(inFlight.current));
-      const subjectIri = mintSubjectIri(assetDecision);
-      const properties = buildActionDocument(
-        { subjectIri, rdfType: assetDecision },
-        {
-          [`${namespaces.brand}decisionOnAsset`]: { "@id": analysisIri },
-          [`${namespaces.brand}decision`]: "approved",
-        },
-      );
       void startAddition({
-        input: { subjectIri, rdfType: assetDecision, actionShape: decideAssetShape, properties },
+        input: entityActionInput(BrandAssetDecisionSchema, decideAssetShape, {
+          $id: mintSubjectIri(BrandAssetDecisionSchema["@type"]),
+          decisionOnAsset: analysisIri,
+          decision: "approved",
+        }),
       })
         .then(({ executeActionAddition }) => {
           if (!executeActionAddition.success) throw new Error(executeActionAddition.error ?? "The approval failed");

package/src/ldo-ui.ts

@@ -344,6 +344,7 @@ export {
 export { NodeFrame, type NodeFrameProps } from "./graph/special-nodes/NodeFrame";
 
 export { EntityCard, findEntityNode, type EntityCardProps } from "./graph/EntityCard";
+export { EntityViewWithLinks, type EntityViewWithLinksProps } from "./graph/EntityViewWithLinks";
 export { findDetailViewForTypes, findPluralViewForTypes, type DetailView, type PluralView } from "./graph/detail-views";
 export { EntityStripDisplay, type EntityStripDisplayProps } from "./graph/EntityStripDisplay";
 export { stubNodeData } from "./graph/stub-node";

package/src/routes/data-explorer/components/record-detail/ActionFormDialog.tsx

@@ -59,7 +59,6 @@ export function ActionFormDialog(props: ActionFormDialogProps) {
   const baselineRef = useRef<PropertyMap | null>(null);
   const [refusal, setRefusal] = useState<string | null>(null);
   const [formElement, setFormElement] = useState<ShaclFormElement | null>(null);
-  const [isReadingForm, setIsReadingForm] = useState(false);
 
   const attachForm = useCallback((element: ShaclFormElement | null) => setFormElement(element), []);
 
@@ -77,29 +76,20 @@ export function ActionFormDialog(props: ActionFormDialogProps) {
   useEffect(() => {
     if (!formElement || !isUpdate) return;
 
-    let cancelled = false;
-
     // Baseline is the form's own serialization: its editors normalize literals, the triples do not.
-    async function captureBaseline() {
+    function onReady() {
       const store = formElement?.toRDF();
-      const baseline = store ? await baselineFromStore(store, subjectIri) : null;
-
-      if (baseline && !cancelled) baselineRef.current = baseline;
-    }
+      const baseline = store ? baselineFromStore(store, subjectIri) : null;
 
-    function onReady() {
-      void captureBaseline();
+      if (baseline) baselineRef.current = baseline;
     }
 
     onReady();
     formElement.addEventListener("ready", onReady);
-    return () => {
-      cancelled = true;
-      formElement.removeEventListener("ready", onReady);
-    };
+    return () => formElement.removeEventListener("ready", onReady);
   }, [formElement, isUpdate, subjectIri]);
 
-  async function submit() {
+  function submit() {
     const store = formElement?.toRDF();
     const baseline = baselineRef.current;
 
@@ -108,14 +98,7 @@ export function ActionFormDialog(props: ActionFormDialogProps) {
       return;
     }
 
-    setIsReadingForm(true);
-    const edited = await propertiesFromStore(store, subjectIri).catch(() => null);
-    setIsReadingForm(false);
-
-    if (!edited) {
-      setRefusal("The form could not be read.");
-      return;
-    }
+    const edited = propertiesFromStore(store, subjectIri);
 
     if (isUpdate && baseline) {
       const cleared = removedPredicates(baseline, edited);
@@ -176,12 +159,7 @@ export function ActionFormDialog(props: ActionFormDialogProps) {
           <Button variant="tertiary" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button
-            size="sm"
-            onClick={() => void submit()}
-            isLoading={isPending || isReadingForm}
-            disabled={!shapesTurtle}
-          >
+          <Button size="sm" onClick={submit} isLoading={isPending} disabled={!shapesTurtle}>
             {copy.submitLabel}
           </Button>
         </DialogFooter>

package/src/routes/data-explorer/components/record-detail/ChatPreview.tsx

@@ -7,6 +7,7 @@ import { actionShapesForTypes } from "./action-shapes";
 import { Badge } from "#components/badge/index";
 import {
   type ActionShapeSpec,
+  EntityViewWithLinks,
   findEntityNode,
   GenericView,
   getEntityView,
@@ -97,7 +98,11 @@ export function ChatPreview(props: ChatPreviewProps) {
       <section>
         <h3 className={cn(sectionLabelClass, "mb-1.5 text-muted-foreground")}>Chat rendering</h3>
         <div className="max-w-md">
-          {EntityView ? <EntityView data={node.data} /> : <GenericView data={node.data} defaultExpanded />}
+          {EntityView ? (
+            <EntityViewWithLinks view={EntityView} data={node.data} />
+          ) : (
+            <GenericView data={node.data} defaultExpanded />
+          )}
         </div>
       </section>
 

package/src/routes/data-explorer/components/record-detail/action-properties.ts

@@ -7,14 +7,14 @@ export type PropertyMap = Record<string, unknown>;
 // The form stamps this on every serialization
 const conformsTo = `${namespaces.dcterms}conformsTo`;
 
-export async function propertiesFromStore(store: ShaclFormStore, subjectIri: string): Promise<PropertyMap> {
+export function propertiesFromStore(store: ShaclFormStore, subjectIri: string): PropertyMap {
   const quads = [...store].filter((quad) => quad.predicate.value !== conformsTo);
-  const { "@id": _id, "@type": _type, ...properties } = await documentFromQuads(quads, subjectIri);
+  const { "@id": _id, "@type": _type, ...properties } = documentFromQuads(quads, subjectIri);
 
   return properties;
 }
 
-export async function baselineFromStore(store: ShaclFormStore, subjectIri: string): Promise<PropertyMap | null> {
+export function baselineFromStore(store: ShaclFormStore, subjectIri: string): PropertyMap | null {
   if (store.size === 0) return null;
 
   return propertiesFromStore(store, subjectIri);

package/src/routes/integrations/catalog-shape.ts

@@ -22,6 +22,8 @@ export type OAuthConnectionMethod = ConnectionMethodBase & {
   source: "oauth";
   integration: GQLIntegration;
   callbackProvider?: string;
+  // Further oauth_provider values whose callback resumes this same method, e.g. a second identity provider.
+  alternateCallbackProviders?: readonly string[];
   resumesSetupAfterOAuth?: boolean;
   connectedAction?: ComponentType;
 };

package/src/routes/integrations/components/connect-forms/MicrosoftAdsConnectForm.tsx

@@ -0,0 +1,140 @@
+import {
+  GQLInferalLocation,
+  GQLIntegration,
+  useMicrosoftAdsSetupConnectMutation,
+  useMicrosoftAdsSetupProgressQuery,
+  type GQLMicrosoftAdsAccount,
+} from "@manta-eu/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { inferalLocationLabels } from "./inferal-locations";
+import { OAuthSetupConnectForm, type OAuthSetup, type SetupCopy } from "./OAuthSetupConnectForm";
+import type { ConnectFormProps } from "./types";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import type { TreeSelectItem } from "#components/tree-multi-select/index";
+import { useMantaClient } from "#providers/index";
+
+const copy: SetupCopy = {
+  providerName: "Microsoft Ads",
+  identityProviderName: "Microsoft",
+  entitySingular: "account",
+  entityPlural: "accounts",
+  signInDescription:
+    "Sign in the way you sign in to Microsoft Advertising: with a Microsoft account, or with Google if your Advertising login is a Google account.",
+  pickTitle: "Pick the Microsoft Ads accounts to connect",
+  pickDescription:
+    "Manta loads each account's Search campaigns, ad groups, ads and keywords, plus daily campaign, keyword and search-query reports.",
+  noEntitiesLabel:
+    "We couldn't find any Microsoft Advertising accounts for this Microsoft sign-in. Sign in with a different user or check your account access.",
+  noneConnectableLabel:
+    "Every Microsoft Advertising account on this sign-in is already connected. Sign in as a different user to connect another one.",
+};
+
+export const defaultMicrosoftAdsLocation = GQLInferalLocation.Enam;
+
+// Microsoft Advertising refuses a Microsoft token for a login that is a Google account (GoogleAccountIsRequired).
+const googleSignIn = [{ label: "Continue with Google", href: "/oauth/microsoft-ads-google/start" }] as const;
+
+const inferalLocations: ReadonlySet<string> = new Set(Object.values(GQLInferalLocation));
+
+function isInferalLocation(value: string): value is GQLInferalLocation {
+  return inferalLocations.has(value);
+}
+
+function accountHint(
+  account: GQLMicrosoftAdsAccount,
+  alreadyConnected: boolean,
+  reconnectable: boolean,
+): string | undefined {
+  if (!account.connectable) return "Unavailable";
+  if (reconnectable) return "Reconnect";
+  if (alreadyConnected) return "Already connected";
+  return undefined;
+}
+
+export function microsoftAdsTreeItems(
+  accounts: GQLMicrosoftAdsAccount[],
+  alreadyConnectedExternalIds: ReadonlySet<string>,
+  reconnectableExternalIds: ReadonlySet<string> = new Set(),
+): TreeSelectItem[] {
+  return accounts.map((account) => {
+    const reconnectable = reconnectableExternalIds.has(account.id);
+    const alreadyConnected = !reconnectable && alreadyConnectedExternalIds.has(account.id);
+    return {
+      id: account.id,
+      label: account.name ?? account.number ?? account.id,
+      caption: account.number ?? account.id,
+      hint: accountHint(account, alreadyConnected, reconnectable),
+      selectable: account.connectable,
+      disabled: alreadyConnected,
+      depth: 0,
+    };
+  });
+}
+
+function useMicrosoftAdsSetup(location: GQLInferalLocation): OAuthSetup<GQLMicrosoftAdsAccount> {
+  const { mantaClient } = useMantaClient();
+  const queryClient = useQueryClient();
+  const progressQuery = useMicrosoftAdsSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
+  const connectMutation = useMicrosoftAdsSetupConnectMutation(mantaClient);
+  const progress = progressQuery.data?.microsoftAdsSetupProgress;
+
+  return {
+    progress: progress && { state: progress.state, rows: progress.accounts, lastError: progress.lastError },
+    refetchProgress: progressQuery.refetch,
+    resetProgress: () =>
+      queryClient.setQueryData(useMicrosoftAdsSetupProgressQuery.getKey(), {
+        microsoftAdsSetupProgress: { state: [], accounts: null, lastError: null },
+      }),
+    connect: async (accountIds) =>
+      (await connectMutation.mutateAsync({ accountIds, location })).microsoftAdsSetupConnect,
+    isConnecting: connectMutation.isPending,
+  };
+}
+
+type LocationPickerProps = {
+  value: GQLInferalLocation;
+  onChange: (location: GQLInferalLocation) => void;
+};
+
+function LocationPicker(props: LocationPickerProps) {
+  const { value, onChange } = props;
+
+  return (
+    <div className="grid gap-1">
+      <Select value={value} onValueChange={(next) => isInferalLocation(next) && onChange(next)}>
+        <SelectTrigger label="Stream location" id="microsoft-ads-location" className="w-full h-10">
+          <SelectValue placeholder="Select a region" />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(inferalLocationLabels).map(([location, label]) => (
+            <SelectItem key={location} value={location}>
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <p className="typography-caption text-muted-foreground">
+        Where the account's data stream runs. Pick the region closest to your account.
+      </p>
+    </div>
+  );
+}
+
+export function MicrosoftAdsConnectForm(props: ConnectFormProps) {
+  const [location, setLocation] = useState<GQLInferalLocation>(defaultMicrosoftAdsLocation);
+  const setup = useMicrosoftAdsSetup(location);
+
+  return (
+    <OAuthSetupConnectForm
+      {...props}
+      integration={GQLIntegration.MicrosoftAds}
+      oauthStartPath="/oauth/microsoft-ads/start"
+      copy={copy}
+      setup={setup}
+      treeItems={microsoftAdsTreeItems}
+      pickExtras={<LocationPicker value={location} onChange={setLocation} />}
+      alternateSignIns={googleSignIn}
+    />
+  );
+}

package/src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx

@@ -2,7 +2,7 @@ import { GQLGoogleSetupStateEnum, type GQLIntegration } from "@manta-eu/client";
 import { parseError } from "@manta-eu/client/shared/error-utils";
 import { isPresent } from "@manta-eu/lib/present";
 import { ArrowLeft } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 import { match } from "ts-pattern";
 import { ConnectFormHeader } from "./ConnectFormHeader";
@@ -66,11 +66,19 @@ export type OAuthSetupConnectFormProps<Row extends SetupRow> = ConnectFormProps
   ) => TreeSelectItem[];
   treeOptions?: SetupTreeOptions;
   resumesUnfinishedSetup?: boolean;
+  // Rendered under the list while picking, for a choice the connect needs besides the ids.
+  pickExtras?: ReactNode;
+  // Other identity providers that lead into the same setup, offered beside the main sign-in.
+  alternateSignIns?: readonly AlternateSignIn[];
 };
 
+export type AlternateSignIn = { label: string; href: string };
+
 export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupConnectFormProps<Row>) {
   const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
-  const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup } = props;
+  const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup, pickExtras } =
+    props;
+  const { alternateSignIns } = props;
   const { providerName } = copy;
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
@@ -151,7 +159,14 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 
       <div className="min-h-40">
         {match(phase)
-          .with("idle", () => <IdleView copy={copy} oauthStartPath={oauthStartPath} onOpened={handleOpened} />)
+          .with("idle", () => (
+            <IdleView
+              copy={copy}
+              oauthStartPath={oauthStartPath}
+              alternateSignIns={alternateSignIns}
+              onOpened={handleOpened}
+            />
+          ))
           .with("awaitingOAuth", () => <AwaitingOAuthView copy={copy} />)
           .with("loadingAccounts", () => <LoadingEntitiesView copy={copy} />)
           .with("pickingAccount", () => (
@@ -161,6 +176,7 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
               selectedIds={selectedIds}
               onToggle={toggleId}
               treeOptions={treeOptions}
+              extras={pickExtras}
             />
           ))
           .with("submitting", () => <SubmittingView copy={copy} />)
@@ -221,11 +237,12 @@ type CopyProps = {
 
 type IdleViewProps = CopyProps & {
   oauthStartPath: string;
+  alternateSignIns?: readonly AlternateSignIn[];
   onOpened: () => void;
 };
 
 function IdleView(props: IdleViewProps) {
-  const { copy, oauthStartPath, onOpened } = props;
+  const { copy, oauthStartPath, alternateSignIns, onOpened } = props;
 
   return (
     <div className="grid gap-4">
@@ -240,6 +257,9 @@ function IdleView(props: IdleViewProps) {
         label={`Continue with ${copy.identityProviderName}`}
         onOpened={onOpened}
       />
+      {alternateSignIns?.map(({ label, href }) => (
+        <OAuthConnectLink key={href} href={href} label={label} variant="secondary" onOpened={onOpened} />
+      ))}
     </div>
   );
 }
@@ -283,10 +303,11 @@ type PickingEntityViewProps = CopyProps & {
   selectedIds: ReadonlySet<string>;
   onToggle: (id: string, checked: boolean) => void;
   treeOptions?: SetupTreeOptions;
+  extras?: ReactNode;
 };
 
 function PickingEntityView(props: PickingEntityViewProps) {
-  const { copy, items, selectedIds, onToggle, treeOptions } = props;
+  const { copy, items, selectedIds, onToggle, treeOptions, extras } = props;
 
   if (!isPresent(items)) {
     return <Banner type="warning" label={copy.noEntitiesLabel} />;
@@ -310,6 +331,7 @@ function PickingEntityView(props: PickingEntityViewProps) {
         searchPlaceholder={`Search ${copy.entityPlural}...`}
         {...treeOptions}
       />
+      {extras}
     </div>
   );
 }

package/src/routes/integrations/components/connect-forms/inferal-locations.ts

@@ -0,0 +1,13 @@
+import { GQLInferalLocation } from "@manta-eu/client";
+
+export const inferalLocationLabels: Readonly<Record<GQLInferalLocation, string>> = {
+  [GQLInferalLocation.Wnam]: "Western North America",
+  [GQLInferalLocation.Enam]: "Eastern North America",
+  [GQLInferalLocation.Sam]: "South America",
+  [GQLInferalLocation.Weur]: "Western Europe",
+  [GQLInferalLocation.Eeur]: "Eastern Europe",
+  [GQLInferalLocation.Apac]: "Asia Pacific",
+  [GQLInferalLocation.Oc]: "Oceania",
+  [GQLInferalLocation.Afr]: "Africa",
+  [GQLInferalLocation.Me]: "Middle East",
+};

package/src/routes/integrations/connect-forms.ts

@@ -14,6 +14,7 @@ export { GoogleAnalyticsConnectForm } from "./components/connect-forms/GoogleAna
 export { KlaviyoConnectForm } from "./components/connect-forms/KlaviyoConnectForm";
 export { LinkedinConnectForm } from "./components/connect-forms/LinkedinConnectForm";
 export { MetaAdsConnectForm } from "./components/connect-forms/MetaAdsConnectForm";
+export { MicrosoftAdsConnectForm } from "./components/connect-forms/MicrosoftAdsConnectForm";
 export { ShopifyConnectForm } from "./components/connect-forms/ShopifyConnectForm";
 export { SlackConnectForm } from "./components/connect-forms/SlackConnectForm";
 export { TriplewhaleConnectForm } from "./components/connect-forms/TriplewhaleConnectForm";
@@ -25,3 +26,4 @@ export {
   type MantaSyncPluginLinkProps,
   type MantaSyncPluginStepProps,
 } from "./components/MantaSyncPluginDownload";
+export { inferalLocationLabels } from "./components/connect-forms/inferal-locations";

package/src/routes/integrations/connection-view.ts

@@ -44,6 +44,7 @@ const oauthAccountNoun = {
   [GQLIntegration.GoogleAnalytics]: "Property",
   [GQLIntegration.Meta]: "Ad account",
   [GQLIntegration.Linkedin]: "Ad account",
+  [GQLIntegration.MicrosoftAds]: "Account",
   [GQLIntegration.Snapchat]: "Ad account",
   [GQLIntegration.Shopify]: "Shop",
   [GQLIntegration.Woocommerce]: "Store",