[LOC] MWPW-164734 - single rollout for loc

libs/blocks/locui-create/input-locale/index.js

@@ -10,7 +10,7 @@
   setLocale,
   updateDraftProject,
 } from '../store.js';
-import { ENG_LANG_CODE, PROJECT_TYPES } from '../utils/constant.js';
+import { ENG_LANG_CODE, PROJECT_ACTION, PROJECT_TYPES } from '../utils/constant.js';
 
 function initialLanguageList() {
   if (
@@ -22,8 +22,8 @@
 
 function initialRegions() {
   if (project.value.type === PROJECT_TYPES.translation) {
-    const englishLocale = locales.value.filter((locItem) => locItem.languagecode === ENG_LANG_CODE);
-    const { livecopies = '' } = englishLocale[0] || {};
+    const englishLocale = locales.value.find((locItem) => locItem.languagecode === ENG_LANG_CODE);
+    const { livecopies = '' } = englishLocale || {};
     return localeRegion.value.reduce((acc, curr) => {
       const { key, value } = curr;
       const valueList = value.split(',');
@@ -45,6 +45,41 @@
   return localeRegion.value;
 }
 
+function prefillActionAndWorkflow(languages) {
+  const storedLanguages = project.value?.languages ?? [];
+  if (storedLanguages.length < 1) {
+    return languages.map((lang) => ({
+      ...lang,
+      action: project.value.type === PROJECT_TYPES.translation
+        ? PROJECT_ACTION.translate : PROJECT_ACTION.rollout,
+      workflow: '',
+    }));
+  }
+
+  const languageByCode = storedLanguages.reduce((acc, curr) => {
+    const { langCode } = curr;
+    acc[langCode] = curr;
+    return acc;
+  }, {});
+
+  const prefilledLanguages = languages.map((lang) => {
+    const { langCode } = lang;
+    const { action, workflow = '' } = languageByCode[langCode] || {};
+    const prefillLanguage = {
+      ...lang,
+      action,
+      workflow,
+    };
+    if (!action) {
+      prefillLanguage.action = project.value.type === PROJECT_TYPES.translation
+        ? PROJECT_ACTION.translate : PROJECT_ACTION.rollout;
+    }
+    return prefillLanguage;
+  });
+
+  return prefilledLanguages;
+}
+
 export default function useInputLocale() {
   const [selectedRegion, setSelectedRegion] = useState(
     locSelected.value?.selectedRegion || {},
@@ -175,34 +210,10 @@
       ...prevState,
       ...updateRegionStates(selectedLocale),
     }));
   }, [selectedLocale]);
 
   const errorPresent = () => Object.keys(activeLocales).length > 0;
 
-  const prefillActionAndWorkflow = (languages) => {
-    const storedLanguages = project.value?.languages ?? [];
-    if (storedLanguages.length < 1) {
-      return languages.map((lang) => ({ ...lang, action: project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout', workflow: '' }));
-    }
-    let iteratorIndex = 0;
-    const prefilledLanguages = [];
-
-    while (iteratorIndex < languages.length) {
-      const { action, workflow } = storedLanguages[iteratorIndex] ?? {};
-      const prefillLanguage = {
-        ...languages[iteratorIndex],
-        action,
-        workflow: workflow || '',
-      };
-      if (!action) {
-        prefillLanguage.action = project.value.type === PROJECT_TYPES.translation ? 'Translate' : 'Rollout';
-      }
-      prefilledLanguages.push(prefillLanguage);
-      iteratorIndex += 1;
-    }
-    return prefilledLanguages;
-  };
-
   const handleNext = async () => {
     if (!errorPresent()) return;
     const sortedLanguages = transformActiveLocales()

libs/blocks/locui-create/input-locale/view.js

@@ -3,6 +3,7 @@ import useInputLocale from './index.js';
 import StepControls from '../components/stepControls.js';
 import { PROJECT_TYPES } from '../utils/constant.js';
 import Toast from '../components/toast.js';
+import { initByParams } from '../store.js';
 
 export default function InputLocales() {
   const {
@@ -24,23 +25,25 @@ export default function InputLocales() {
     setApiError,
   } = useInputLocale();
 
-  const RenderRegion = () => html`
+  const RenderRegion = () => {
+    if (!initByParams.value?.languages) {
+      return (html`
     <h5 class="section-header">Quick Select for Language/Locale</h5>
     <div class="region-grid">
       <div class="region-buttons">
         ${localeRegionList.map(
-    (region) => html`
+          (region) => html`
             <button
               key=${region.key}
               class="region-button ${selectedRegion[region.key]
-    ? 'active'
-    : ''}"
+          ? 'active'
+          : ''}"
               onClick=${() => toggleRegion(region)}
             >
               ${region.key}
             </button>
           `,
-  )}
+        )}
       </div>
       <div class="additional-cta">
         <button class="reset-button" onClick=${selectAll}>
@@ -51,31 +54,38 @@ export default function InputLocales() {
           </button>
       </div>
     </div>
-  `;
+  `);
+    } return null;
+  };
 
-  const RenderLanguage = () => html`
+  const RenderLanguage = () => {
+    if (!initByParams.value?.languages) {
+      return (html`
     <div class="language-grid">
       <h5 class="section-header">Select the Language(s)</h5>
       <div class="language-buttons">
         ${languagesList.map(
-    (language) => language.livecopies.length > 0
+          (language) => language.livecopies.length > 0
             && html`
               <button
                 key=${language.languagecode}
                 class="language-button ${language.livecopies
-    .split(',')
-    .some((locale) => selectedLocale.includes(locale))
-    ? 'active'
-    : ''}"
+          .split(',')
+          .some((locale) => selectedLocale.includes(locale))
+          ? 'active'
+          : ''}"
                 onClick=${() => selectLanguage(language)}
               >
                 ${language.language}
               </button>
             `,
-  )}
+        )}
       </div>
     </div>
-  `;
+  `);
+    }
+    return null;
+  };
 
   const RenderLocales = () => {
     const groupedLocales = selectedLocale.reduce((acc, locale) => {

libs/blocks/locui-create/input-urls/view.js

@@ -8,6 +8,7 @@ import FragmentsSection from '../fragments/view.js';
 import {
   authenticated,
   createDraftProject,
+  initByParams,
   nextStep,
   project,
   projectCreated,
@@ -171,7 +172,7 @@ export default function InputUrls() {
       setEditBehavior(project.value?.editBehavior || '');
       setUrlsStr(project.value?.urls?.join('\n'));
       setFragmentsEnabled(project.value?.fragments?.length > 0);
-      setFragments(project.value?.fragments);
+      setFragments(project.value?.fragments ?? []);
       if (
         project.value?.fragments?.length > 0
         && project.value?.urls.length > 0
@@ -209,7 +210,7 @@ export default function InputUrls() {
           <span>- ${PROJECT_TYPE_LABELS[type]}</span>
         </div>
         <div class="locui-form-body">
-          ${!projectCreated.value && html`
+          ${(!projectCreated.value && !initByParams.value?.type) && html`
             <div class="segment-ctrl pb-12">
               ${[PROJECT_TYPES.translation, PROJECT_TYPES.rollout].map((pType) => html`
                 <div
@@ -287,6 +288,7 @@ export default function InputUrls() {
             onInput=${handleUrlsChange}
             onBlur=${handleUrlsBlur}
             placeholder=${`Enter the full URL. E.g, ${origin}/drafts/localization/projects/raga/image-test-one`}
+            disabled=${initByParams.value?.urls}
           />
           ${errors.urlsStr
           && html`<div class="form-field-error">${errors.urlsStr}</div>`}

libs/blocks/locui-create/locui-create.css

@@ -235,6 +235,13 @@ body {
   border-color: #d73220;
 }
 
+.form-field-textarea:disabled {
+  background-color: #fff;
+  border-color: #dadada;
+  color: #c6c6c6;
+  cursor: not-allowed;
+}
+
 .form-field-switch {
   display: none;
 }

libs/blocks/locui-create/locui-create.js

@@ -9,13 +9,15 @@ import {
   getUserToken,
   loading,
   project,
+  setInitByParams,
+  setProject,
 } from './store.js';
 import StepTracker from './components/stepTracker.js';
 import InputActions from './input-actions/view.js';
 import Header from '../milostudio-header/milostudio-header.js';
 import Sidenav from '../milostudio-sidenav/sidenav.js';
 import { getConfig, loadStyle } from '../../utils/utils.js';
-import { getEnvQueryParam, setSelectedLocalesAndRegions } from './utils/utils.js';
+import { getEnvQueryParam, getProjectByParams, setSelectedLocalesAndRegions } from './utils/utils.js';
 import Toast from './components/toast.js';
 
 function Create() {
@@ -24,13 +26,14 @@ function Create() {
   useEffect(() => {
     const setup = async () => {
       try {
-        await fetchLocaleDetails();
         await getUserToken();
+        await fetchLocaleDetails();
         env.value = getEnvQueryParam();
-
-        /* Fetch draft project if project key is found in url params */
         const searchParams = new URLSearchParams(window.location.search);
         const projectKey = searchParams.get('projectKey');
+        const projectInitByUrl = getProjectByParams(searchParams);
+
+        /* Fetch draft project if project key is found in url params */
         if (projectKey) {
           const error = await fetchDraftProject(projectKey);
           if (error) {
@@ -43,6 +46,11 @@ function Create() {
             setSelectedLocalesAndRegions();
           }
         }
+        if (projectInitByUrl && !projectKey) {
+          setProject(projectInitByUrl);
+          setInitByParams(projectInitByUrl);
+          setSelectedLocalesAndRegions();
+        }
       } catch (error) {
         // console.error('Error fetching locale details:', error);
       }

libs/blocks/locui-create/store.js

@@ -21,6 +21,7 @@
 export const localeRegion = signal([]);
 export const locSelected = signal(null);
 export const projectType = signal('rollout');
+export const initByParams = signal(null);
 export const env = signal('dev');
 
 export function nextStep() {
@@ -38,6 +39,13 @@
   };
 }
 
+export function setInitByParams(params) {
+  initByParams.value = {
+    ...initByParams.value,
+    ...params,
+  };
+}
+
 export function setLocale(_locale) {
   locSelected.value = {
     ...locSelected.value,
@@ -62,7 +70,7 @@
     userToken = accessToken.value;
     authenticated.value = true;
   } catch {
     console.error('Sharepoint login failed. Unable to get User-Token!');
     authenticated.value = false;
   }
   loading.value = false;
@@ -71,6 +79,7 @@
 
 export async function fetchLocaleDetails() {
   try {
+    loading.value = true;
     const tenantName = getTenantName();
     if (!tenantName) {
       // console.warn('Tenant name is missing, skipping fetchLocaleDetails.');
@@ -96,9 +105,10 @@
     locales.value = processedLocales.filter((locItem) => locItem.workflow !== TRANSCREATION_WORKFLOW && locItem.livecopies !== '');
     localeRegion.value = processedLocaleRegion;
   } catch (error) {
     console.error('Error during fetchLocaleDetails:', error.message);
     throw error;
   }
+  loading.value = false;
 }
 
 export async function createDraftProject() {

libs/blocks/locui-create/utils/constant.js

@@ -11,6 +11,12 @@ export const PROJECT_TYPE_LABELS = {
   rollout: 'Rollout',
 };
 
+export const PROJECT_ACTION = {
+  translate: 'Translate',
+  rollout: 'Rollout',
+  english_copy: 'English Copy',
+};
+
 export const TRANSLATE_ONLY_LANGS = ['en-GB'];
 export const ENG_LANG_CODE = 'en';
 export const TRANSCREATION_WORKFLOW = 'Transcreation';

libs/blocks/locui-create/utils/utils.js

@@ -1,5 +1,6 @@
 import getServiceConfig from '../../../utils/service-config.js';
 import { origin } from '../../locui/utils/franklin.js';
+import { getInitialName } from '../input-urls/index.js';
 import { env, locSelected, locales as stLocales, project as stProject } from '../store.js';
 
 export function getTenantName() {
@@ -104,3 +105,35 @@ export function setSelectedLocalesAndRegions() {
   selectedLocale.sort((a, b) => a.localeCompare(b));
   locSelected.value = { selectedLocale, activeLocales };
 }
+
+export function getLanguageDetails(lang) {
+  const langDetails = stLocales.value?.find(({ languagecode }) => languagecode === lang) ?? {};
+  return [{
+    action: 'Rollout',
+    langCode: langDetails.languagecode,
+    language: langDetails.language,
+    locales: langDetails.livecopies.split(','),
+    workflow: '',
+  }];
+}
+
+export function getProjectByParams(searchParams) {
+  const encodedUrls = searchParams.get('encodedUrls');
+  const type = searchParams.get('type');
+  const decodedUrls = encodedUrls?.split(',')?.map((url) => decodeURI(url));
+  const language = searchParams.get('language');
+
+  const projectInfo = {};
+  if (type) {
+    projectInfo.type = type;
+    projectInfo.name = getInitialName(type);
+  }
+  if (decodedUrls?.length > 0) {
+    projectInfo.urls = decodedUrls;
+  }
+  if (language) {
+    projectInfo.languages = getLanguageDetails(language);
+  }
+
+  return Object.keys(projectInfo).length > 0 ? projectInfo : null;
+}