@manta-eu/react 0.2.1 → 0.4.0

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

@@ -6,6 +6,7 @@ export {
   type StoredConnection,
 } from "./components/connect-forms/DataConnectionConnectForm";
 export type { DataConnectionSetting, StoredDataConnection } from "./components/connect-forms/data-connection-fields";
+export { CanvaConnectForm } from "./components/connect-forms/CanvaConnectForm";
 export { FigmaConnectForm } from "./components/connect-forms/FigmaConnectForm";
 export { GmailConnectForm } from "./components/connect-forms/GmailConnectForm";
 export { GoogleAdsConnectForm } from "./components/connect-forms/GoogleAdsConnectForm";
@@ -13,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";
@@ -24,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

@@ -36,6 +36,7 @@ export type ConnectionView = {
 // Fallback nouns shown until the ontology carries rdfs:labels for these classes (MNT-503).
 // https://linear.app/manta-eu/issue/MNT-503/add-rdfslabel-to-provider-entity-classes-in-the-ontology
 const oauthAccountNoun = {
+  [GQLIntegration.Canva]: "User",
   [GQLIntegration.Dash]: "Account",
   [GQLIntegration.Figma]: "User",
   [GQLIntegration.Slack]: "Workspace",
@@ -43,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",

package/src/routes/integrations/types.ts

@@ -11,6 +11,7 @@ import type { ComponentType, SVGProps } from "react";
 import type { ConnectionView } from "./connection-view";
 
 export const gmailProviderId = "GMAIL";
+export const canvaProviderId = "CANVA";
 export const figmaProviderId = "FIGMA";
 export const dashProviderId = "DASH";
 export const dataConnectionProviderIds = {
@@ -29,6 +30,7 @@ export type DataConnectorType = keyof typeof dataConnectionProviderIds;
 export type ProviderId =
   | `${GQLInferalIntegrationProvider}`
   | typeof gmailProviderId
+  | typeof canvaProviderId
   | typeof figmaProviderId
   | typeof dashProviderId
   | (typeof dataConnectionProviderIds)[DataConnectorType];

package/src/routes/rules/hooks/useRuleFactsPreview.ts

@@ -1,5 +1,5 @@
 import { useSparqlQueryQuery } from "@manta-eu/client";
-import { formatIriForRdfox, compactUri, namespaces } from "@manta-eu/client/shared/rdf-namespaces";
+import { formatIriForSparql, compactUri, namespaces } from "@manta-eu/client/shared/rdf-namespaces";
 import { isJsonLdNode } from "@manta-eu/client/types/jsonld";
 import { parseDatalogRule, datalogBodyToSparqlSelect } from "@manta-eu/datalog-parser";
 import type { DatalogAtom, SparqlSelectResult } from "@manta-eu/datalog-parser";
@@ -241,20 +241,20 @@ function generateTriplePattern(atom: DatalogAtom): string | null {
     .with("property", () => {
       if (!isPropertyAtom(atom)) return null;
       const subject = atom.arguments[0]?.value || "?s";
-      const predicate = formatIriForRdfox(atom.predicate.value || "");
+      const predicate = formatIriForSparql(atom.predicate.value || "");
       const object = atom.arguments[1]?.value || "?o";
       return `${subject} ${predicate} ${object}`;
     })
     .with("class", () => {
       if (!isClassAtom(atom)) return null;
       const subject = atom.arguments[0]?.value || "?s";
-      const classIRI = formatIriForRdfox(atom.predicate.value || "");
+      const classIRI = formatIriForSparql(atom.predicate.value || "");
       return `${subject} a ${classIRI}`;
     })
     .with("triple", () => {
       if (!isTripleAtom(atom)) return null;
       const subject = atom.subject.value || "?s";
-      const predicate = formatIriForRdfox(atom.predicate.value || "");
+      const predicate = formatIriForSparql(atom.predicate.value || "");
       const object = atom.object.value || "?o";
       return `${subject} ${predicate} ${object}`;
     })

package/src/shacl/form-appearance.ts

@@ -168,7 +168,7 @@ function propertyPathsByBlankNode(turtle: string): Map<string, string> {
   return paths;
 }
 
-/** RDFox emits `sh:property` in arbitrary order, reshuffling fields on every open; reorder by path local name. */
+/** The datastore emits `sh:property` in arbitrary order, so fields move on every open; reorder by path local name. */
 export function sortShapeProperties(turtle: string): string {
   const paths = propertyPathsByBlankNode(turtle);
   const localName = (node: string) => {

package/src/shared/graph-derived-queries.ts

@@ -8,7 +8,7 @@ import {
   useConversationStartersQuery,
   useCoverageRulesQuery,
   useCurrentFactValueQuery,
-  useExplainRdFoxFactQuery,
+  useExplainFactQuery,
   useGetActionPlansSummaryQuery,
   useMemoriesQuery,
   useMemorySchemasQuery,
@@ -34,7 +34,7 @@ export const graphDerivedQueries: QueryWithGetKey[] = [
   useConversationStartersQuery,
   useCoverageRulesQuery,
   useCurrentFactValueQuery,
-  useExplainRdFoxFactQuery,
+  useExplainFactQuery,
   useGetActionPlansSummaryQuery,
   useMemoriesQuery,
   useMemorySchemasQuery,