Merge branch 'main' of github.com:episerver/content-js-sdk

Author: exacs

packages/optimizely-cms-cli/src/utils/mapping.ts

@@ -63,14 +63,15 @@ export function parseChildContentType(
 /**
  * Transforms the properties of an object by applying a transformation function to each property value.
  * @param properties - An object containing key-value pairs where the values are to be transformed.
+ * @param parentKey - The parent contentType key, used for context in certain transformations (when '_self' is used).
  * @returns A new object with the same keys as the input object, but with transformed values.
  */
 export function transformProperties(
   properties: Record<string, any>,
-  key: string
+  parentKey: string
 ): Record<string, any> {
   return Object.entries(properties).reduce((acc, [key, value]) => {
-    acc[key] = transformProperty(value, key);
+    acc[key] = transformProperty(value, parentKey);
     return acc;
   }, {} as Record<string, any>);
 }
@@ -86,17 +87,17 @@ export function transformProperties(
  * - Mapping allowed and restricted types.
  *
  * @param property - The property object to be transformed.
- * @param key - The parent contentType key, used for context in certain transformations (when '_self' is used).
+ * @param parentKey - The parent contentType key, used for context in certain transformations (when '_self' is used).
  * @returns The transformed property object after applying all handlers.
  */
-function transformProperty(property: any, key: string): any {
+function transformProperty(property: any, parentKey: string): any {
   let updatedProperty = { ...property };
 
   updatedProperty = handleComponentType(updatedProperty);
   updatedProperty = handleEnumFormat(updatedProperty);
   updatedProperty = handleArrayType(updatedProperty);
   updatedProperty = handleContentReferenceType(updatedProperty);
-  updatedProperty = mapAllowedRestrictedTypes(updatedProperty, key);
+  updatedProperty = mapAllowedRestrictedTypes(updatedProperty, parentKey);
 
   return updatedProperty;
 }
@@ -224,27 +225,30 @@ function hasContentTypeWithKey(obj: any): boolean {
 /**
  * Recursively maps and normalizes `allowedTypes` and `restrictedTypes`
  * and handles nested `items` when the type is "array".
- * Uses the provided `key` for context when extracting key names when '_self' is used.
+ * Uses the provided `parentKey` for context when extracting key names when '_self' is used.
  * @param updatedValue - The schema object to transform.
- * @param key - The parent contentType key, used for context in certain transformations.
+ * @param parentKey - The parent contentType key, used for context in certain transformations.
  * @returns The same object, with allowed/restricted types normalized.
  */
-function mapAllowedRestrictedTypes(updatedValue: any, key: string) {
+function mapAllowedRestrictedTypes(updatedValue: any, parentKey: string) {
   // Recursively handle nested 'items' if it's an array
   if (updatedValue.type === 'array' && updatedValue.items) {
-    updatedValue.items = mapAllowedRestrictedTypes(updatedValue.items, key);
+    updatedValue.items = mapAllowedRestrictedTypes(
+      updatedValue.items,
+      parentKey
+    );
   }
 
   if (['contentReference', 'content'].includes(updatedValue.type)) {
     if (Array.isArray(updatedValue.allowedTypes)) {
       updatedValue.allowedTypes = updatedValue.allowedTypes.map((input: any) =>
-        extractKeyName(input, key)
+        extractKeyName(input, parentKey)
       ) as any;
     }
 
     if (Array.isArray(updatedValue.restrictedTypes)) {
       updatedValue.restrictedTypes = updatedValue.restrictedTypes.map(
-        (input: any) => extractKeyName(input, key)
+        (input: any) => extractKeyName(input, parentKey)
       ) as any;
     }
   }

packages/optimizely-cms-sdk/src/graph/index.ts

@@ -77,11 +77,7 @@ export class GraphClient {
   }
 
   /** Perform a GraphQL query with variables */
-  async request(
-    query: string,
-    variables: GraphVariables,
-    previewToken?: string
-  ) {
+  async request(query: string, variables: any, previewToken?: string) {
     const url = new URL(this.graphUrl);
 
     if (!previewToken) {

samples/fx-integration/README.md

@@ -1,26 +1,80 @@
-This is a [Next.js](https://nextjs.org) project showcasing the integration between Optimizely CMS and Optimizely Feature Experimentation.
+This is a [Next.js](https://nextjs.org) project showcasing the integration between [Optimizely Content Management System (CMS)](https://docs.developers.optimizely.com/content-management-system/v1.0.0-CMS-SaaS/docs/overview-saas) and [Optimizely Feature Experimentation](https://docs.developers.optimizely.com/feature-experimentation/docs/introduction).
 
 ## Getting Started
 
 You need a Optimizely CMS instance and Optimizely Feature Experimentation instance.
 
 ### Set up environment
 
-Create an `.env` file with the following environment variables:
+Create an `.env` file with the following content. You will learn how to get the values for the variables in the next steps.
 
 ```
 OPTIMIZELY_CMS_HOST=
 OPTIMIZELY_GRAPH_SINGLE_KEY=
 OPTIMIZELY_CMS_CLIENT_ID=
 OPTIMIZELY_CMS_CLIENT_SECRET=
+
 OPTIMIZELY_FX_SDK_KEY=
+OPTIMIZELY_FX_ACCESS_TOKEN=
 ```
 
-Run `npm run cms:push-config` to create the content types (defined under the directory `/src/components/`)
+### CMS credentials
+
+1. Put the URL of your CMS as the `OPTIMIZELY_CMS_HOST` variable. For example `https://app-1234.cms.optimizely.com/`
+2. Go to your CMS instance → Settings → API Keys.
+3. Under **Render Content**, the _Single Key_ variable, is the variable `OPTIMIZELY_GRAPH_SINGLE_KEY`
+4. In the same page, under **Manage Content**, click "Create API key".
+5. In the Create API dialog, give a name and click "Create API key"
+6. You will see Client ID and Client Secret. Those are the values for `OPTIMIZELY_CMS_CLIENT_ID` and `OPTIMIZELY_CMS_CLIENT_SECRET` variables respectively.
+
+### Feature Experimentation credentials
+
+In the Feature Experimentation app.
+
+1. Go to Settings → Environmnents.
+2. The SDK Key for your environment is the variable `OPTIMIZELY_FX_SDK_KEY`.
+
+> [!Note]
+> If the environment is _secured_, you will need an access token. Create it in the app and set it as the `OPTIMIZELY_FX_ACCESS_TOKEN` environment variable
+
+## Push the content types model to the CMS
+
+1. Run `npm run cms:login` to test your connection against the Optimizely CMS
+2. Run `npm run cms:push-config` to create the content types defined under `src/components` to the Optimizely CMS.
+
+## Create variations in Feature Experimentation and CMS
+
+This sample site assumes:
+
+- There is a page under `/en/landing` that is running an experiment (i.e., different visitors will get different versions of the page)
+- The existance of a feature flag with the key `tv_genre` (the `tv_genre` contains the rules about which user will get which version)
+- Variations in Feature Experimentation have the same name as variations in CMS.
+
+To reproduce it:
+
+1. In Feature Experimentation, create a feature flag with key `tv_genre`. [Read the Feature Experimentation documentation](https://support.optimizely.com/hc/en-us/articles/38906082664077-Manage-flags) to be familiar with flags.
+2. In Feature Experimentation, create variations for the flag. [Read the Feature Experimentation docs to learn more about flag variations](https://support.optimizely.com/hc/en-us/articles/38676757193485-Create-flag-variations).
+
+   For example, create the variations `k_drama`, `action` and `sports`
+
+3. In CMS, create a page with the content type `BlankExperience` with URL `landing`.
+4. In CMS, create variations for that page. You should use the names you used in FX to create variations in the CMS.
+
+   In this example, create the variations `k_drama`, `action` and `sports`
+
+## Test your site
+
+1. Run `npm run dev` to start the app
+2. Go to `https://localhost:3000/en/landing`. You should see a variation of the page.
+3. Open the inspector, locate the cookies and remove the cookie `user_id`.
+4. Refresh the page. You might see a different page variation (depending on the variation rules you have defined)
+
+## Learn more about this sample site
 
-Run `npm run dev` to start the development server
+- Inspect the file [`/src/lib.fx.ts`](./src/lib/fx.ts) to see the code that uses the Feature Experimentation SDK
+- Inspect the file [`/src/app/en/[...slug]/page.tsx`](./src/app/en/[...slug]/page.tsx) to learn how to fetch a specific variation from your CMS
 
-### NPM scripts
+## Further reading
 
-- `npm run cms:login` to test your connection agains the Optimizely CMS
-- `npm run cms:push-config` to create the content types defined here in the Optimizely CMS
+- [Optimizely Feature Experimentation JavaScript SDK](https://docs.developers.optimizely.com/feature-experimentation/docs/javascript-sdk)
+- [Create content variations in the Optimizely CMS](https://docs.developers.optimizely.com/content-management-system/v1.0.0-CMS-SaaS/docs/create-content-variation)

samples/fx-integration/src/components/FxHero.tsx

@@ -29,8 +29,8 @@ export default function FxHero({ opti }: Props) {
       <p>{opti.subtitle}</p>
 
       <div className={css.ctas}>
-        {opti.ctas?.map((cta) => (
-          <OptimizelyComponent opti={cta} />
+        {opti.ctas?.map((cta, i) => (
+          <OptimizelyComponent key={i} opti={cta} />
         ))}
       </div>
     </div>

samples/fx-integration/src/lib/fx.ts

@@ -9,9 +9,11 @@ import {
 import { cookies } from 'next/headers';
 
 const SDK_KEY = process.env.OPTIMIZELY_FX_SDK_KEY!;
+const ACCESS_TOKEN = process.env.OPTIMIZELY_FX_ACCESS_TOKEN;
 
 const pollingConfigManager = createPollingProjectConfigManager({
   sdkKey: SDK_KEY,
+  datafileAccessToken: ACCESS_TOKEN,
   autoUpdate: true,
   updateInterval: 60000, // 1 minute
 });
@@ -66,11 +68,6 @@ export async function getVariation(path: string) {
   if (!ruleset) {
     return null;
   }
-  console.log(
-    'Path: "%s". Running an experiment with ruleset "%s"',
-    path,
-    ruleset
-  );
 
   const user = await getUserContext();
   const decision = user.decide(ruleset);