@khester/create-dynamics-app 3.2.0 → 3.4.0

package/templates/pcf-field/dev/main.tsx

@@ -10,7 +10,13 @@ import {
   type HarnessField,
 } from '@dataverse-kit/pcf-dev-harness/shell';
 import { {{componentName}}Component } from '../{{componentName}}/{{componentName}}Component';
-import { readField, saveField, type HttpError } from './harness/dataverse';
+import {
+  readField,
+  saveField,
+  readChoiceOptions,
+  type ChoiceOption,
+  type HttpError,
+} from './harness/dataverse';
 
 /**
  * Dev harness — renders the control against either a local value or a REAL Dataverse column.
@@ -38,20 +44,38 @@ const LIVE_ENABLED = !!import.meta.env.VITE_DYNAMICS_URL;
  * column's choice metadata — note the UPPERCASE `Options`/`Value`/`Label`, which is the live
  * PCF API shape, not the form-builder's design-time config. Harmless for the other variants,
  * which ignore `context` entirely.
+ *
+ * These placeholder options are for MOCK mode only. In Live mode the harness replaces them with
+ * the column's REAL choices — see `buildContext` / `readChoiceOptions`.
  */
-const MOCK_CONTEXT = {
-  parameters: {
-    value: {
-      attributes: {
-        Options: [
-          { Value: 1, Label: 'Option A' },
-          { Value: 2, Label: 'Option B' },
-          { Value: 3, Label: 'Option C' },
-        ],
-      },
-    },
-  },
-} as unknown as ComponentFramework.Context<any>;
+const MOCK_OPTIONS: ChoiceOption[] = [
+  { Value: 1, Label: 'Option A' },
+  { Value: 2, Label: 'Option B' },
+  { Value: 3, Label: 'Option C' },
+];
+
+/**
+ * Wrap a set of choices in the PCF context shape the control reads.
+ *
+ * ★ Live mode MUST NOT use the placeholder options — not even as a fallback when the metadata
+ * lookup returns nothing. Two distinct failures, and the second is the worse one:
+ *
+ *   - placeholders in live mode with a NON-matching value (the original defect): a real value like
+ *     100000002 matches none of 1/2/3, the Dropdown shows its placeholder, and the control looks
+ *     broken while the read was correct. Recorded against row 02's G5.
+ *   - placeholders in live mode with a MATCHING value (found in review of #306): the shipped
+ *     default binding is `accounts` / `accountcategorycode`, whose real values are
+ *     1 = "Preferred Customer" and 2 = "Standard". Falling back to the placeholders renders
+ *     "Option A" — plausible, confidently wrong, and indistinguishable from working. A blank
+ *     reads as broken; a wrong label reads as fine. Strictly worse than the bug being fixed.
+ *
+ * So live mode passes `[]` when metadata is unavailable: the optionset variant then degrades to
+ * the numeric input it already documents for a control with no choice metadata, which is honest.
+ */
+const buildContext = (options: ChoiceOption[]): ComponentFramework.Context<any> =>
+  ({
+    parameters: { value: { attributes: { Options: options } } },
+  }) as unknown as ComponentFramework.Context<any>;
 
 /** Turn a failed live call into a red status line, calling out auth failures specifically. */
 function describeError(e: unknown, verb: string): React.ReactNode {
@@ -71,6 +95,9 @@ const Harness: React.FC = () => {
   const [height, setHeight] = usePersistedState('height', 0);
   const [theme, setTheme] = usePersistedState<ThemeChoice>('theme', 'light');
   const [dataSource, setDataSource] = usePersistedState<DataSource>('dataSource', 'mock');
+  // Live choice metadata for the bound column. NOT persisted: it belongs to whichever binding
+  // was last loaded, and a stale set from a previous column would mislabel the value.
+  const [liveOptions, setLiveOptions] = React.useState<ChoiceOption[] | null>(null);
   const [placeholder, setPlaceholder] = usePersistedState('placeholder', 'Enter a value');
   const [disabled, setDisabled] = usePersistedState('disabled', false);
   const [binding, setBinding] = usePersistedState<FieldBinding>('binding', {
@@ -101,6 +128,9 @@ const Harness: React.FC = () => {
   const onDataSourceChange = (next: DataSource): void => {
     setDataSource(next);
     setValue({{valueDefault}});
+    // Drop the live choices with the live value. Keeping them would label MOCK mode with the
+    // last-loaded column's real options — the mirror image of the bug this fetch fixes.
+    setLiveOptions(null);
     setLiveStatus(
       next === 'mock' ? null : <span style={{ color: '#605e5c' }}>Enter a binding and click Load.</span>,
     );
@@ -114,13 +144,28 @@ const Harness: React.FC = () => {
       }
       setLiveStatus(<span style={{ color: '#605e5c' }}>Loading…</span>);
       try {
-        const { raw, formatted } = await readField(binding.entitySetName, binding.recordId, binding.column);
+        // Fetched together: the VALUE is meaningless to an option-set control without the
+        // choices to resolve it against, and issuing them in parallel keeps Load one round trip
+        // deep from the user's point of view. `readChoiceOptions` resolves to null for a column
+        // that has no choices, which is the normal case for every non-optionset variant.
+        const [{ raw, formatted }, options] = await Promise.all([
+          readField(binding.entitySetName, binding.recordId, binding.column),
+          // `.catch` makes the documented contract true: readChoiceOptions handles non-ok
+          // RESPONSES, but a fetch rejection or a JSON parse failure would otherwise propagate
+          // through Promise.all and discard a perfectly good value read. (Review of #306.)
+          readChoiceOptions(binding.entitySetName, binding.column).catch(() => null),
+        ]);
+        setLiveOptions(options);
         // The control owns its own typing; the harness hands the raw platform value straight
         // through, exactly as the PCF host does via `context.parameters.value.raw`.
         setValue(raw as {{tsType}});
+        // ★ A null metadata result gets its own signal. Without one, a choice column whose
+        // metadata could not be read looks identical to a successful load — green status, empty
+        // dropdown — and the reader has nothing to go on. (Review of #306.)
         setLiveStatus(
-          <span style={{ color: '#107c10' }}>
+          <span style={{ color: options === null ? '#8a6116' : '#107c10' }}>
             Loaded{formatted ? ` — "${formatted}"` : ''}.
+            {options === null ? ' No choice metadata for this column — the value is shown raw.' : ''}
           </span>,
         );
       } catch (e) {
@@ -193,7 +238,7 @@ const Harness: React.FC = () => {
           disabled={disabled}
           onChange={setValue}
           onBlur={() => undefined}
-          context={MOCK_CONTEXT}
+          context={buildContext(dataSource === 'live' ? (liveOptions ?? []) : MOCK_OPTIONS)}
         />
         {dataSource === 'live' && (
           <button

package/templates/static-web-app/api/local.settings.json

@@ -0,0 +1,7 @@
+{
+  "IsEncrypted": false,
+  "Values": {
+    "FUNCTIONS_WORKER_RUNTIME": "node",
+    "AzureWebJobsStorage": ""
+  }
+}

package/templates/static-web-app/frontend/vite.config.ts

@@ -5,8 +5,16 @@ export default defineConfig({
   plugins: [react()],
   build: { outDir: 'dist' },
   server: {
+    // ★ PINNED, and `strictPort` is load-bearing. The root `dev` script runs
+    // `swa start http://localhost:5173`, so the emulator proxies to a hard-coded URL. Vite's
+    // default on a busy port is to move silently to 5174/5175/…, which would leave `swa`
+    // proxying to a dead port — the shell would serve and every module would fail. `strictPort`
+    // turns that into a loud failure instead.
+    port: 5173,
+    strictPort: true,
     proxy: {
-      // Local: proxy /api to the Functions host (swa start wires this in production).
+      // Only used when Vite is hit DIRECTLY on :5173 (`npm --prefix frontend run dev` without
+      // the emulator). Under `npm run dev` the SWA emulator owns /api routing.
       '/api': 'http://localhost:7071',
     },
   },

package/templates/static-web-app/package.json

@@ -5,8 +5,10 @@
   "description": "{{projectName}} — Azure Static Web App (React Fluent {{componentLibrary}} + Functions API)",
   "scripts": {
     "install:all": "npm install && npm --prefix frontend install && npm --prefix api install",
-    "dev": "swa start frontend --api-location api --run \"npm --prefix frontend run dev\"",
+    "dev": "npm --prefix api run build && swa start http://localhost:5173 --api-location api --run \"npm --prefix frontend run dev\"",
+    "dev:api": "npm --prefix api run watch",
     "build": "npm --prefix frontend run build && npm --prefix api run build",
+    "deploy": "swa deploy ./frontend/dist --api-location ./api --api-language node --api-version 20 --env production",
     "typecheck": "npm --prefix frontend run typecheck && npm --prefix api run typecheck"
   },
   "devDependencies": {

package/templates/static-web-app/staticwebapp.config.json

@@ -3,5 +3,8 @@
     "rewrite": "/index.html",
     "exclude": ["/api/*", "/assets/*"]
   },
-  "routes": [{ "route": "/api/*", "allowedRoles": ["anonymous"] }]
+  "routes": [{ "route": "/api/*", "allowedRoles": ["anonymous"] }],
+  "platform": {
+    "apiRuntime": "node:20"
+  }
 }