@salesforce/webapp-template-feature-graphql-experimental 1.35.1 → 1.36.0

package/src/force-app/main/default/webapplications/feature-graphql/src/api/utils/query/highRevenueAccountsQuery.graphql

@@ -1,29 +0,0 @@
-query GetHighRevenueAccounts($minRevenue: Currency) {
-	uiapi {
-		query {
-			Account(
-				where: { AnnualRevenue: { gt: $minRevenue } }
-				orderBy: { AnnualRevenue: { order: DESC } }
-				first: 50
-			) {
-				edges {
-					node {
-						Id
-						Name {
-							value
-						}
-						AnnualRevenue {
-							value
-						}
-						Industry {
-							value
-						}
-						Website {
-							value
-						}
-					}
-				}
-			}
-		}
-	}
-}

package/src/force-app/main/default/webapplications/feature-graphql/src/api/utils/user.test.ts

@@ -1,129 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { getCurrentUser } from "./user";
-import { createDataSDK } from "@salesforce/sdk-data";
-
-vi.mock("@salesforce/sdk-data", () => ({
-	createDataSDK: vi.fn(),
-}));
-
-const mockFetch = vi.fn();
-const mockSDK = { fetch: mockFetch };
-
-// Mock console.error to avoid noise in test output
-const mockConsoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-
-describe("User API Utils", () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		vi.mocked(createDataSDK).mockResolvedValue(mockSDK);
-	});
-
-	afterEach(() => {
-		mockConsoleError.mockClear();
-	});
-
-	describe("getCurrentUser", () => {
-		const mockChatterUser = {
-			id: "005000000000001",
-			name: "John Doe",
-			email: "john@example.com",
-			username: "john@example.com",
-		};
-
-		it("successfully fetches current user", async () => {
-			mockFetch.mockResolvedValue({
-				ok: true,
-				json: () => Promise.resolve(mockChatterUser),
-			});
-
-			const result = await getCurrentUser();
-
-			expect(mockFetch).toHaveBeenCalledWith("/services/data/v65.0/chatter/users/me");
-			expect(result).toEqual({
-				id: "005000000000001",
-				name: "John Doe",
-			});
-		});
-
-		it('falls back to "User" when name is empty', async () => {
-			mockFetch.mockResolvedValue({
-				ok: true,
-				json: () =>
-					Promise.resolve({
-						id: "005000000000003",
-						name: "",
-					}),
-			});
-
-			const result = await getCurrentUser();
-
-			expect(result).toEqual({
-				id: "005000000000003",
-				name: "User",
-			});
-		});
-
-		it('falls back to "User" when name is null', async () => {
-			mockFetch.mockResolvedValue({
-				ok: true,
-				json: () =>
-					Promise.resolve({
-						id: "005000000000004",
-						name: null,
-					}),
-			});
-
-			const result = await getCurrentUser();
-
-			expect(result).toEqual({
-				id: "005000000000004",
-				name: "User",
-			});
-		});
-
-		it('falls back to "User" when name is undefined', async () => {
-			mockFetch.mockResolvedValue({
-				ok: true,
-				json: () =>
-					Promise.resolve({
-						id: "005000000000005",
-					}),
-			});
-
-			const result = await getCurrentUser();
-
-			expect(result).toEqual({
-				id: "005000000000005",
-				name: "User",
-			});
-		});
-
-		it("throws error when request fails", async () => {
-			mockFetch.mockResolvedValue({
-				ok: false,
-				status: 500,
-			});
-
-			await expect(getCurrentUser()).rejects.toThrow("HTTP 500");
-			expect(mockConsoleError).toHaveBeenCalled();
-		});
-
-		it("throws error when no user data is found", async () => {
-			mockFetch.mockResolvedValue({
-				ok: true,
-				json: () => Promise.resolve({}),
-			});
-
-			await expect(getCurrentUser()).rejects.toThrow("No user data found in Chatter API response");
-			expect(mockConsoleError).toHaveBeenCalled();
-		});
-
-		it("throws error when fetch rejects", async () => {
-			const apiError = new Error("Network error");
-			mockFetch.mockRejectedValue(apiError);
-
-			await expect(getCurrentUser()).rejects.toThrow("Network error");
-			expect(mockConsoleError).toHaveBeenCalledWith("Error fetching user data:", apiError);
-		});
-	});
-});

package/src/force-app/main/default/webapplications/feature-graphql/src/api/utils/user.ts

@@ -1,53 +0,0 @@
-import { createDataSDK, type DataSDK } from "@salesforce/sdk-data";
-
-interface User {
-	id: string;
-	name: string;
-}
-
-interface ChatterUser {
-	id: string;
-	name: string;
-	email?: string;
-	username?: string;
-}
-
-// Lazy-initialized SDK instance
-let sdkInstance: DataSDK | null = null;
-
-async function getSDK(): Promise<DataSDK> {
-	if (!sdkInstance) {
-		sdkInstance = await createDataSDK();
-	}
-	return sdkInstance;
-}
-
-/**
- * Fetch current user information from Salesforce
- * Uses Chatter API to get current user details
- * @returns User info or null if no session
- */
-export async function getCurrentUser(): Promise<User | null> {
-	try {
-		const sdk = await getSDK();
-		const response = await sdk.fetch!("/services/data/v65.0/chatter/users/me");
-
-		if (!response.ok) {
-			throw new Error(`HTTP ${response.status}`);
-		}
-
-		const userData: ChatterUser = await response.json();
-
-		if (!userData || !userData.id) {
-			throw new Error("No user data found in Chatter API response");
-		}
-
-		return {
-			id: userData.id,
-			name: userData.name || "User",
-		};
-	} catch (error) {
-		console.error("Error fetching user data:", error);
-		throw error;
-	}
-}

package/src/force-app/main/default/webapplications/feature-graphql/src/components/AccountsTable.tsx

@@ -1,121 +0,0 @@
-import { useState, useEffect } from "react";
-import { getHighRevenueAccounts } from "../api/utils/accounts";
-
-interface AccountRow {
-	id: string;
-	name: string;
-	industry: string;
-	annualRevenue: string;
-	website: string;
-}
-
-/**
- * AccountsTable – Example component that demonstrates GraphQL data fetching
- * from Salesforce using the executeGraphQL utility.
- *
- * Uses Pattern 1 (external .graphql file) via getHighRevenueAccounts().
- */
-export function AccountsTable() {
-	const [accounts, setAccounts] = useState<AccountRow[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	useEffect(() => {
-		async function fetchAccounts() {
-			try {
-				const data = await getHighRevenueAccounts({ minRevenue: 100000 });
-				const rows: AccountRow[] = (data ?? [])
-					.filter((node): node is NonNullable<typeof node> => node != null)
-					.map((node) => ({
-						id: node.Id,
-						name: node.Name?.value ?? "-",
-						industry: node.Industry?.value ?? "-",
-						annualRevenue: node.AnnualRevenue?.value
-							? new Intl.NumberFormat("en-US", {
-									style: "currency",
-									currency: "USD",
-									maximumFractionDigits: 0,
-								}).format(Number(node.AnnualRevenue.value))
-							: "-",
-						website: node.Website?.value ?? "-",
-					}));
-				setAccounts(rows);
-			} catch (err) {
-				setError(err instanceof Error ? err.message : "Failed to fetch accounts");
-			} finally {
-				setLoading(false);
-			}
-		}
-		void fetchAccounts();
-	}, []);
-
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center p-8 text-sm text-gray-500">
-				Loading accounts…
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
-				{error}
-			</div>
-		);
-	}
-
-	if (accounts.length === 0) {
-		return (
-			<div className="flex items-center justify-center p-8 text-sm text-gray-500 italic">
-				No accounts found
-			</div>
-		);
-	}
-
-	return (
-		<div className="w-full overflow-auto rounded-lg border border-gray-200">
-			<table className="w-full border-collapse text-sm">
-				<thead>
-					<tr className="bg-indigo-50">
-						<th className="border-b border-indigo-200 px-4 py-2.5 text-left font-medium text-gray-700">
-							Account Name
-						</th>
-						<th className="border-b border-indigo-200 px-4 py-2.5 text-left font-medium text-gray-700">
-							Industry
-						</th>
-						<th className="border-b border-indigo-200 px-4 py-2.5 text-right font-medium text-gray-700">
-							Annual Revenue
-						</th>
-						<th className="border-b border-indigo-200 px-4 py-2.5 text-left font-medium text-gray-700">
-							Website
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					{accounts.map((account) => (
-						<tr key={account.id} className="border-b border-gray-100 hover:bg-gray-50">
-							<td className="px-4 py-2.5 font-medium text-gray-900">{account.name}</td>
-							<td className="px-4 py-2.5 text-gray-600">{account.industry}</td>
-							<td className="px-4 py-2.5 text-right text-gray-600">{account.annualRevenue}</td>
-							<td className="px-4 py-2.5 text-gray-600">
-								{account.website !== "-" ? (
-									<a
-										href={account.website}
-										target="_blank"
-										rel="noopener noreferrer"
-										className="text-indigo-600 hover:underline"
-									>
-										{account.website}
-									</a>
-								) : (
-									"-"
-								)}
-							</td>
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</div>
-	);
-}

package/src/force-app/main/default/webapplications/feature-graphql/src/index.ts

@@ -1,7 +0,0 @@
-/**
- * feature-graphql – Salesforce GraphQL data access utilities
- */
-
-export { executeGraphQL, gql } from "./api/graphql";
-export type { NodeOfConnection } from "./api/graphql";
-export { AccountsTable } from "./components/AccountsTable";

package/src/force-app/main/default/webapplications/feature-graphql/src/pages/AccountsPage.tsx

@@ -1,19 +0,0 @@
-import { AccountsTable } from "../components/AccountsTable";
-
-/**
- * AccountsPage – Demo page showing the AccountsTable component
- * that fetches Salesforce data via GraphQL.
- */
-export default function AccountsPage() {
-	return (
-		<div className="mx-auto max-w-5xl space-y-6 p-6">
-			<div>
-				<h1 className="text-2xl font-bold text-gray-900">Accounts</h1>
-				<p className="mt-1 text-sm text-gray-500">
-					High-revenue accounts fetched from Salesforce via GraphQL.
-				</p>
-			</div>
-			<AccountsTable />
-		</div>
-	);
-}

package/src/force-app/main/default/webapplications/feature-graphql/src/routes.tsx

@@ -1,20 +0,0 @@
-import type { RouteObject } from "react-router";
-import AppLayout from "./__inherit__appLayout";
-import AccountsPage from "./pages/AccountsPage";
-
-export const routes: RouteObject[] = [
-	{
-		path: "/",
-		element: <AppLayout />,
-		children: [
-			{
-				path: "accounts",
-				element: <AccountsPage />,
-				handle: {
-					showInNavigation: true,
-					label: "Accounts",
-				},
-			},
-		],
-	},
-];

package/src/force-app/main/default/webapplications/feature-graphql/vite.config.ts

@@ -1,69 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "path";
-import { resolve } from "path";
-import tailwindcss from "@tailwindcss/vite";
-import salesforce from "@salesforce/vite-plugin-webapp-experimental";
-
-export default defineConfig(({ mode }) => {
-	return {
-		plugins: [tailwindcss(), react(), salesforce()],
-
-		build: {
-			outDir: resolve(__dirname, "dist"),
-			assetsDir: "assets",
-			sourcemap: false,
-		},
-
-		resolve: {
-			dedupe: ["react", "react-dom"],
-			alias: {
-				react: path.resolve(__dirname, "node_modules/react"),
-				"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
-				"@": path.resolve(__dirname, "./src"),
-				"@api": path.resolve(__dirname, "./src/api"),
-				"@components": path.resolve(__dirname, "./src/components"),
-				"@utils": path.resolve(__dirname, "./src/utils"),
-				"@styles": path.resolve(__dirname, "./src/styles"),
-				"@assets": path.resolve(__dirname, "./src/assets"),
-			},
-		},
-
-		test: {
-			root: resolve(__dirname),
-			environment: "jsdom",
-			setupFiles: ["./src/test/setup.ts"],
-			include: [
-				"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
-				"src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
-			],
-			coverage: {
-				provider: "v8",
-				reporter: ["text", "html", "clover", "json"],
-				exclude: [
-					"node_modules/",
-					"src/test/",
-					"src/**/*.d.ts",
-					"src/main.tsx",
-					"src/vite-env.d.ts",
-					"src/components/**/index.ts",
-					"**/*.config.ts",
-					"build/",
-					"dist/",
-					"coverage/",
-					"eslint.config.js",
-				],
-				thresholds: {
-					global: {
-						branches: 85,
-						functions: 85,
-						lines: 85,
-						statements: 85,
-					},
-				},
-			},
-			testTimeout: 10000,
-			globals: true,
-		},
-	};
-});