MWPW-156265 - [LocUI] Pass user information to loc service calls (#2759)

* MWPW-156265 Pass user information to loc service calls and locui url to create-project

Pass user details (accessToken) to service calls create-project, start-sync, start-project, start-rollout, cancel-project.
This is used for storing in data.json and authorization.

Pass locui url to be stored in data.json.

* Review comment and eslint error fixes

* Added trailing comma

---------

Co-authored-by: Raghu A <[email protected]>
Co-authored-by: Raghu A <[email protected]>

libs/blocks/locui/utils/miloc.js

@@ -15,6 +15,7 @@ import {
 } from './state.js';
 import { getItemId } from '../../../tools/sharepoint/shared.js';
 import updateExcelTable from '../../../tools/sharepoint/excel.js';
+import { accessToken } from '../../../tools/sharepoint/state.js';
 import { origin, preview } from './franklin.js';
 import { setExcelStatus, setStatus } from './status.js';
 import getServiceConfig from '../../../utils/service-config.js';
@@ -24,6 +25,7 @@ let pollingInterval = null;
 const INTERVAL = 3000;
 const MAX_COUNT = 1200; // 3000 x 1200 = 3600000s = 1 hour
 const ROLLOUT_ALL_AVAILABLE = ['completed', 'translated'];
+const UNAUTHORIZED = 401;
 
 let waiting = false;
 
@@ -40,6 +42,24 @@ function handleProjectStatusDetail(detail) {
   languages.value = [...languages.value.map((lang) => ({ ...lang, ...detail[lang.code] }))];
 }
 
+const cancelPolling = () => {
+  if (pollingInterval) {
+    clearInterval(pollingInterval);
+    pollingInterval = null;
+    polling.value = false;
+  }
+};
+
+function showAuthError(operation) {
+  cancelPolling();
+  setStatus(
+    'service',
+    'error',
+    `You do not have access to ${operation}.`,
+    'Please refresh page, login to sidekick and retry.',
+  );
+}
+
 export async function getProjectStatus() {
   try {
     const url = await getMilocUrl();
@@ -109,20 +129,25 @@ export async function startSync() {
   setStatus('service', 'info', 'Syncing documents to Langstore.');
   const url = await getMilocUrl();
   setExcelStatus('Sync to langstore/en', '');
-  const opts = { method: 'POST' };
+  const opts = { method: 'POST', headers: { 'User-Token': accessToken.value } };
   const resp = await fetch(`${url}start-sync?project=${heading.value.projectId}`, opts);
+  if (resp.status === UNAUTHORIZED) showAuthError('start project');
   return resp.status;
 }
 
 export async function startProject({ skipSync }) {
   let url = await getMilocUrl();
   setStatus('service', 'info', 'Starting project');
-  const opts = { method: 'POST' };
+  const opts = { method: 'POST', headers: { 'User-Token': accessToken.value } };
   url = `${url}start-project?project=${heading.value.projectId}`;
   if (skipSync) url = `${url}&skipsync=true`;
   const resp = await fetch(url, opts);
   if (resp.status === 201) setExcelStatus('Sent to localization service', '');
-  setStatus('service');
+  if (resp.status === UNAUTHORIZED) {
+    showAuthError('start project');
+  } else {
+    setStatus('service');
+  }
   return resp.status;
 }
 
@@ -132,7 +157,7 @@ export async function cancelProject() {
   allowCancelProject.value = false;
   let url = await getMilocUrl();
   setStatus('service', 'info', 'Cancelling project');
-  const opts = { method: 'POST' };
+  const opts = { method: 'POST', headers: { 'User-Token': accessToken.value } };
   url = `${url}cancel-project?project=${heading.value.projectId}`;
   const resp = await fetch(url, opts);
   if (resp.status === 200) setExcelStatus('Project cancelled', '');
@@ -141,7 +166,11 @@ export async function cancelProject() {
     setStatus('service', 'error', 'Cancelling project', json.error);
     return resp.status;
   }
-  setStatus('service', 'info', 'Successfully Cancelled Project', null, 5000);
+  if (resp.status === UNAUTHORIZED) {
+    showAuthError('cancel project');
+  } else {
+    setStatus('service', 'info', 'Successfully Cancelled Project', null, 5000);
+  }
   return resp.status;
 }
 
@@ -155,16 +184,20 @@ export async function rolloutLang(
   if (ep === 'start-rollout') { statNotes = `${statNotes} - Reroll: ${reroll ? 'yes' : 'no'}`; }
   setExcelStatus(statAction, statNotes);
   const url = await getMilocUrl();
-  const opts = { method: 'POST' };
+  const opts = { method: 'POST', headers: { 'User-Token': accessToken.value } };
   const resp = await fetch(`${url}${ep}?project=${heading.value.projectId}&languageCode=${languageCode}&reroll=${reroll}`, opts);
+  if (resp.status === UNAUTHORIZED) {
+    showAuthError('rollout');
+    return {};
+  }
   return resp.json();
 }
 
 export async function createProject() {
   const url = await getMilocUrl();
   setStatus('service', 'info', 'Creating new project.');
   const body = `${origin}${heading.value.path}.json`;
-  const opts = { method: 'POST', body };
+  const opts = { method: 'POST', headers: { 'User-Token': accessToken.value }, body };
   const resp = await fetch(`${url}create-project`, opts);
   if (resp.status === 201) {
     setExcelStatus('Project Created', '');
@@ -179,17 +212,10 @@ export async function createProject() {
     const json = await resp.json();
     setStatus('service', 'error', 'Creating project', json.errors && json.errors?.length > 0 ? json.errors : json.error);
   }
+  if (resp.status === UNAUTHORIZED) showAuthError('create project');
   return resp.status;
 }
 
-const cancelPolling = () => {
-  if (pollingInterval) {
-    clearInterval(pollingInterval);
-    pollingInterval = null;
-    polling.value = false;
-  }
-};
-
 export async function getServiceUpdates() {
   const url = await getMilocUrl();
   let count = 1;