Make content fragment path for WF mappings configurable (#118)

* refactoring to use single graphql endpoint for map

* refactor 'mapping' functions

- refactor mapping retrieval functions in all three hcv blocks

* Remove comments

* remove unused function stub

* resolve bug in header filter refresh

* remove unused import

blocks/gmo-program-details/gmo-program-details.js

@@ -1,15 +1,15 @@
 import { decorateIcons, readBlockConfig } from '../../scripts/lib-franklin.js';
 import { getQueryVariable } from '../../scripts/shared.js';
 import { executeQuery } from '../../scripts/graphql.js';
-import { resolveMappings, filterArray, getProductMapping, checkBlankString, dateFormat } from '../../scripts/shared-program.js';
+import { filterArray, getProductMapping, checkBlankString, dateFormat, statusMapping, getMappingArray } from '../../scripts/shared-program.js';
 import { getBaseConfigPath } from '../../scripts/site-config.js';
 import { searchAsset } from '../../scripts/assets.js';
 
 let blockConfig;
 const programName = getQueryVariable('programName');
 const programID = getQueryVariable('programID');
-const deliverableMappings = resolveMappings("getDeliverableTypeMapping");
-const platformMappings = resolveMappings("getPlatformsMapping");
+const deliverableMappings = getMappingArray('deliverableType');
+const platformMappings = getMappingArray('platforms');
 
 export default async function decorate(block) {
 
@@ -333,8 +333,7 @@ function buildArtifactLinks(program) {
 async function buildStatus(status) {
     const statusDiv = document.createElement('div');
     statusDiv.classList.add('campaign-status');
-    const statusArray = await resolveMappings("getStatusList");
-    const statusMatch = filterArray(statusArray, 'value', status);
+    const statusMatch = filterArray(statusMapping, 'value', status);
     const statusText = statusMatch ? statusMatch[0].text : status;
     const statusHex = statusMatch[0]["color-code"];
     statusDiv.textContent = statusText;

blocks/gmo-program-header/gmo-program-header.js

@@ -1,6 +1,6 @@
 import { decorateIcons } from '../../scripts/lib-franklin.js';
-import { graphqlQueryNameList, graphqlCampaignByName } from '../../scripts/graphql.js';
-import { statusMapping, productList } from '../../scripts/shared-program.js';
+import { graphqlCampaignByName } from '../../scripts/graphql.js';
+import { statusMapping, productList, getMappingArray } from '../../scripts/shared-program.js';
 
 export default async function decorate(block) {
     block.innerHTML = `
@@ -132,12 +132,12 @@ export default async function decorate(block) {
 
 async function initializeDropdowns() {
     // Business Line List
-    graphqlQueryNameList('getBusinessLine').then((response) => {
+    getMappingArray('businessLine').then((response) => {
         populateDropdown(response, 'dropdownBusinessOptions', 'businessLine');
     });
 
     // Geo List
-    graphqlQueryNameList('getGeoList').then((response) => {
+    getMappingArray('geoList').then((response) => {
         populateDropdown(response, 'dropdownGeoOptions', 'p0TargetGeo');
     });
 
@@ -191,8 +191,7 @@ function populateDropdown(response, dropdownId, type) {
 
 // Function to filter products based on selected business line
 function filterProductsByBusinessLine(businessLine) {
-    const products = productList.data.jsonByPath.item.json.options;
-    const filteredProducts = products.filter(product =>
+    const filteredProducts = productList.filter(product =>
         product['business-line'].includes(businessLine)
     );
     populateDropdown(filteredProducts, 'dropdownProductOptions', 'productOffering');

blocks/gmo-program-list/gmo-program-list.js

@@ -228,8 +228,7 @@ async function buildCampaignList(campaigns, numPerPage) {
 function buildStatus(statusWrapper, campaign) {
     const campaignStatus = document.createElement('div');
     const statusStr = checkBlankString(campaign.node.status);
-    const statusArray = statusMapping.data.jsonByPath.item.json.options;
-    const statusMatch = statusArray.filter(item => item.value === statusStr);
+    const statusMatch = statusMapping.filter(item => item.value === statusStr);
 
     let statusText, statusColor;
     if (statusMatch.length > 0) {

scripts/graphql.js

@@ -5,31 +5,6 @@ import { logError } from './scripts.js';
 const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`;
 const projectId = 'gmo';
 
-export async function graphqlQueryNameList(queryNameList) {
-  const queryName = queryNameList;
-  //persisted query URLs have to be encoded together with the first semicolon
-  const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}`;
-  const jwtToken = await getBearerToken();
-
-  // Return the fetch promise chain so that it can be awaited outside
-  return fetch(graphqlEndpoint, {
-      method: 'GET',
-      headers: {
-          Authorization: jwtToken,
-      },
-  }).then(response => {
-      if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      return response.json();
-  }).then(data => {
-      return data; // Make sure to return the data so that the promise resolves with it
-  }).catch(error => {
-      console.error('Error fetching data: ', error);
-      throw error; // Rethrow or handle error as appropriate
-  });
-}
-
 export async function graphqlCampaignCount(filter = {}) {
   const queryName = 'getTotalPrograms';
   const encodedSemiColon = encodeURIComponent(';');
@@ -213,4 +188,4 @@ export async function executeQuery(queryString) {
       console.error('Error fetching data: ', error);
       throw error; // Rethrow or handle error as appropriate
   });
-};
+};

scripts/shared-program.js

@@ -1,18 +1,10 @@
-import { graphqlQueryNameList } from "./graphql.js";
-import { getProductIconMapping, getBaseConfigPath } from './site-config.js';
+import { executeQuery } from "./graphql.js";
+import { getProductIconMapping, getBaseConfigPath, getQueryPaths } from './site-config.js';
 
 let iconMapping;
-export let statusMapping = await graphqlQueryNameList('getStatusList');
-export let productList = await graphqlQueryNameList('getProductList');
-
-/*
-*   Executes graphql query for 'friendly' labels and returns array of the results
-*/
-export async function resolveMappings(mappingType) {
-    const response = await graphqlQueryNameList(mappingType);
-    const mappingArray = response.data.jsonByPath.item.json.options;
-    return mappingArray;
-}
+const cfMapping = getQueryPaths();
+export let statusMapping = await getMappingArray('status');
+export let productList = await getMappingArray('products');
 
 /**
  * Filter provided array based on provided key/value pair
@@ -32,9 +24,8 @@ export async function getProductMapping(product) {
     } 
     const icon = iconMatch ? configPath + iconMatch[0]['Icon-path'] : defaultIcon;
 
-    if (productList == undefined) productList = await graphqlQueryNameList('getProductList');
-    const productsArray = productList.data.jsonByPath.item.json.options;
-    const productsMatch = filterArray(productsArray, 'value', product);
+    if (productList == undefined) productList = await getMappingArray('products');
+    const productsMatch = filterArray(productList, 'value', product);
     const productsText = productsMatch ? productsMatch[0].text : product;
 
     return {
@@ -57,4 +48,18 @@ export function checkBlankString(string, notAvailableText = 'Not Available') {
 export function dateFormat(dateString) {
     const formattedDate = dateString ? dateString.split('T')[0] : 'Not Available';
     return formattedDate;
+}
+
+function getCFPath(cfArray, type) {
+    const cfMatch = cfArray.filter(item => item['type'] === type);
+    const cfPath =  cfMatch.length > 0 ? cfMatch[0].path : null;
+    return cfPath;
+}
+
+export async function getMappingArray(type) {
+    const mappingCf = getCFPath(await cfMapping, type);
+    const mappings = executeQuery(`getMappings${encodeURIComponent(';')}path=${encodeURIComponent(mappingCf)}`).then((response) => {
+        return response.data.jsonByPath.item.json.options;
+    })
+    return mappings;
 }

scripts/site-config.js

@@ -379,4 +379,19 @@ export async function getProductIconMapping() {
     console.log("Unable to retrieve site-config.json");
   }
   return iconArray;
+}
+
+/**
+ * @returns {Array} with mapping-type and the path to its content fragment.
+ */
+export async function getQueryPaths() {
+  let mapping = [];
+  const response = await getConfig('site-config.json');
+  for (const entry of response['query-fragments'].data || []) {
+    mapping.push({
+      type: entry['mapping-Type'],
+      path: entry['path']
+    });
+  }
+  return mapping;
 }