fix:updating the app

Author: anagarwa

README.md

@@ -1,13 +1,69 @@
 # Assets Usage Tracking
 
-This project is a sample application that demonstrates how to use the Adobe Experience Platform SDK to track assets in a web application. The application is built using the Adobe I/O App Builder and uses the Adobe I/O Runtime to host the application and the Adobe Experience Platform SDK to track assets.
+This project is a sample application that demonstrates how to use the Adobe Experience Platform to track assets usage in a helix site.
+The application provides a report of all the assets used in the site along with important information such as
+- List of all the assets used in the site
+- If any expired asset is being used
+- If there are mismatch between the asset tag and tag applied on the page
+- How many times the asset is used in the site
+- On which pages the asset is used
+- Top Used Asset
 
-## Local Run
+The application is built using the Adobe I/O App Builder and uses the Adobe I/O Runtime to host the application and the Adobe Experience Platform SDK to track assets.
+
+## Accessing the Tool
+
+The tool can be accessed via the following URL:
+
+https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://288650-edsassettracker.adobeio-static.net/index.html?hlxUrl=https://demo-custom-as-config--franklin-assets-selector--hlxsites.hlx.live
+
+where hlxUrl is the URL of the site for which you want to track assets.
 
+## prerequisites
+To Track Usual Assets Usage, you need to have the following indexes created in your Helix Sites project:
+- `assets` index
+This will provide the list of all the assets used in the site along with their url and source 
+category. Such as Adobe Assets, Dynamic Media Assets, Scene7 Assets etc.
+Sample Index Configuration:
+```yaml
+assets-index:
+    target: /assets-index.json
+    properties:
+      polaris-assets:
+        select: a
+        values: |
+          match(attribute(el, 'href'), 'https:\/\/[^\/]+\/adobe\/assets\/urn:aaid:aem:.*')
+      dm-next-assets:
+        select: a
+        values: |
+          match(attribute(el, 'href'), 'https:\/\/[^\/]+\/adobe\/dynamicmedia\/deliver\/urn:aaid:aem:.*')
+      scene7-assets:
+        select: a
+        values: |
+          match(attribute(el, 'href'), 'https:\/\/.*scene7.com\/is\/image\/.*')
+```
+
+- `query` index
+This is in general the default index in the Helix Sites project which provides the list of all the pages in the site.
+This index needs to be enabled with metadata property **tags** to provide the information tags applied on the page.
+Sample Index Configuration:
+```yaml
+site:
+    target: /query-index.json
+    properties:
+      tags:
+        select: head > meta[property="article:tag"]
+        values: |
+          attribute(el, 'content')
+```
+
+Complete sample yaml configuration can be found [here](https://github.com/hlxsites/franklin-assets-selector/blob/main/helix-query.yaml)
+## Local Run
 - Run `aio app run` to start the application
 - Open your browser to `http://localhost:9080` to see the app running locally and it will redirect to assets usage report page.
 - pass `hlxUrl` query parameter to see the assets usage report for the given hlxUrl for example 
-  -> https://localhost:9080/assetsUsageReport.html?hlxUrl=https://demo-custom-as-config--franklin-assets-selector--hlxsites.hlx.live/
+  -> https://localhost:9080/index.html?hlxUrl=https://demo-custom-as-config--franklin-assets-selector--hlxsites.hlx.live/
 - To view your deployed application in the Experience Cloud shell:
   -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080
 
+

web-src/index.html

@@ -48,7 +48,7 @@ <h1 class="assets-title">Assets Usage Report</h1>
       </div>
     </div>
   </div>
-  <script type='module' src="src/assetsData.js"></script>
+<!--  <script type='module' src="src/assetsData.js"></script>-->
 </div>
 </body>
 </html>

web-src/src/assetsData.js

@@ -1,13 +1,14 @@
 import { PublicClientApplication } from './msal-browser-2.14.2.js';
 import excApp, { init } from '@adobe/exc-app';
 
-import { getState } from './index.js';
+// import { getState } from './index.js';
 
 var defaultThumbnail = require('../no-image.png');
 let accessToken;
 
-(async () => {
+async function assetsDataInit() {
 
+  console.log('I am here3 ');
   // Create mask and spinner elements
   const mask = document.createElement('div');
   mask.className = 'mask';
@@ -22,21 +23,21 @@ let accessToken;
 
   const queryParams = new URLSearchParams(window.location.search);
   const pagePath = queryParams.get('pagePath');
-  let hlxUrl;
-  if (pagePath) {
-    hlxUrl = sessionStorage.getItem('hlxUrl');
-  } else {
-    hlxUrl = queryParams.get('hlxUrl');
-    sessionStorage.setItem('hlxUrl', hlxUrl);
-  }
+  const hlxUrl = sessionStorage.getItem('hlxUrl');
+  // if (pagePath) {
+  //   hlxUrl = sessionStorage.getItem('hlxUrl');
+  // } else {
+  //   hlxUrl = queryParams.get('hlxUrl');
+  //   sessionStorage.setItem('hlxUrl', hlxUrl);
+  // }
 
   let data = {};
   async function connectAndFetchData() {
     accessToken = sessionStorage.getItem('accessToken');
     if (!accessToken) {
       try {
-        let state = await getState();
-        accessToken = state.imsToken;
+        // let state = await getState();
+        // accessToken = state.imsToken;
 
       } catch (error) {
         console.log(error);
@@ -46,7 +47,7 @@ let accessToken;
 
     // Proceed if we have a valid access token
     if (accessToken) {
-      sessionStorage.setItem('accessToken', accessToken);
+      // sessionStorage.setItem('accessToken', accessToken);
       try {
         const response = await fetch(
             `https://288650-edsassettracker.adobeio-static.net/api/v1/web/EDS-Asset-Tracker1/fetchList?hlxUrl=${hlxUrl}`,
@@ -360,4 +361,6 @@ let accessToken;
 
   }
 
-})();
+}
+
+export default assetsDataInit;

web-src/src/index.js

@@ -6,6 +6,8 @@ import regeneratorRuntime from 'regenerator-runtime'
 import Runtime, { init } from '@adobe/exc-app'
 import actions from './config.json'
 import actionWebInvoke from './utils.js'
+import assetsDataInit from "./assetsData.js";
+import { PublicClientApplication } from './msal-browser-2.14.2.js';
 
 let state = {}
 
@@ -91,22 +93,102 @@ let state = {}
 
 
 
-window.onload = () => {
+window.onload = async () => {
   /* Here you can bootstrap your application and configure the integration with the Adobe Experience Cloud Shell */
   try {
     // attempt to load the Experience Cloud Runtime
     require('./exc-runtime')
     // if there are no errors, bootstrap the app in the Experience Cloud Shell
     init(initRuntime)
+
+    let state1 = await getState();
+
+    const queryParams = new URLSearchParams(window.location.search);
+    const hlxUrl = queryParams.get('hlxUrl');
+    sessionStorage.setItem('hlxUrl', hlxUrl);
+    sessionStorage.setItem('accessToken', state1.imsToken);
+    await assetsDataInit();
   } catch (e) {
     console.log('application not running in Adobe Experience Cloud Shell')
     // fallback mode, run the application without the Experience Cloud Runtime
+    let accessToken = sessionStorage.getItem('accessToken');
+    if (!accessToken) {
+      accessToken = await fetchAccessToken();
+      console.log(accessToken);
+      sessionStorage.setItem('accessToken', accessToken);
+    } else {
+      console.log('Access token found in session storage');
+      console.log(accessToken);
+
+    }
+    // console.log(accessToken);
+    // state1.imsToken = accessToken;
+    let hlxUrl = sessionStorage.getItem('hlxUrl');
+    if (!hlxUrl) {
+        const queryParams = new URLSearchParams(window.location.search);
+        hlxUrl = queryParams.get('hlxUrl');
+        sessionStorage.setItem('hlxUrl', hlxUrl);
+    }
+    await assetsDataInit();
   }
 
-  showActionsList()
-  document.getElementById('actionForm').onsubmit = (event) => {
-    event.preventDefault()
-    setTimeout(doSubmit, 1)
+   // await assetsDataInit(state);
+
+}
+
+async function fetchAccessToken () {
+  const sp = {
+    clientApp: {
+      auth: {
+        clientId: '2b4aa217-ddcd-4fe0-b09c-5a472764f552',
+        authority: 'https://login.microsoftonline.com/fa7b1b5a-7b34-4387-94ae-d2c178decee1',
+      },
+    },
+    login: {
+      redirectUri: '/spauth.html',
+    },
+  };
+
+  let accessToken;
+  const publicClientApplication = new PublicClientApplication(sp.clientApp);
+  const accounts = publicClientApplication.getAllAccounts();
+
+  if (accounts.length === 0) {
+    // User is not logged in, show the login popup
+    await publicClientApplication.loginPopup(sp.login);
+
+  }
+
+  const account = publicClientApplication.getAllAccounts()[0];
+  const accessTokenRequest = {
+    scopes: ['files.readwrite', 'sites.readwrite.all'],
+    account,
+  };
+
+  try {
+    const res = await publicClientApplication.acquireTokenSilent(accessTokenRequest);
+    accessToken = res.accessToken;
+    return accessToken;
+  } catch (error) {
+    // Acquire token silent failure, and send an interactive request
+    if (error.name === 'InteractionRequiredAuthError') {
+      try {
+        const res = await publicClientApplication.acquireTokenPopup(accessTokenRequest);
+        accessToken = res.accessToken;
+        console.log(accessToken);
+        return accessToken;
+      } catch (err) {
+        console.error(`Cannot connect to SharePoint: ${err.message}`);
+        document.body.removeChild(mask);
+        document.querySelector('.assets-usage-report').style.display = 'block';
+        return null; // Exit if token acquisition fails
+      }
+    } else {
+      console.error('Error acquiring token silently:', error.message);
+      document.body.removeChild(mask);
+      document.querySelector('.assets-usage-report').style.display = 'block';
+      return null;
+    }
   }
 }
 
@@ -203,8 +285,7 @@ async function invokeAction (action, _headers, _params) {
   const result = await actionWebInvoke(action[1], headers, params)
   return result
 }
-
-export async function getState() {
+async function getState() {
   console.log('Getting state');
   let attempts = 0;
   while (!state.imsToken) {