Merge pull request #4933 from kobotoolbox/nlp-addons-task-624-change-…

…displayed-language

[TASK-624] Allow users to select between translated labels and XML names for displayed form questions in NLP UI

jsapp/js/assetUtils.ts

@@ -76,7 +76,9 @@ export function getOrganizationDisplayString(asset: AssetResponse | ProjectViewA
  * Returns the index of language or null if not found.
  */
 export function getLanguageIndex(asset: AssetResponse, langString: string) {
-  let foundIndex = null;
+  // Return -1 instead of null as that would allow
+  // `getQuestionOrChoiceDisplayName` to defualt to xml names.
+  let foundIndex = -1;
 
   if (
     Array.isArray(asset.summary?.languages) &&
@@ -224,6 +226,11 @@ export function getQuestionOrChoiceDisplayName(
   }
 
   if (questionOrChoice.label && Array.isArray(questionOrChoice.label)) {
+    // If the user hasn't made translations yet for a form language show
+    // the xml names instead of blank.
+    if (questionOrChoice.label[translationIndex] === null) {
+      return getRowName(questionOrChoice);
+    }
     return questionOrChoice.label[translationIndex];
   } else if (questionOrChoice.label && !Array.isArray(questionOrChoice.label)) {
     // in rare cases the label could be a string

jsapp/js/components/processing/sidebar/processingSidebar.tsx

@@ -48,7 +48,7 @@ export default function ProcessingSidebar(props: ProcessingSidebarProps) {
         )}
 
         {displays.includes(StaticDisplays.Data) && (
-          <SidebarSubmissionData assetContent={props.asset.content} />
+          <SidebarSubmissionData asset={props.asset} />
         )}
 
         {displays.length === 0 && (

jsapp/js/components/processing/sidebar/sidebarDisplaySettings.module.scss

@@ -26,9 +26,9 @@
   }
 }
 
-.options {
-  margin: 0 !important;
-  overflow-y: auto;
+// We need to win the specificity here
+ul.options.options {
+  margin: 0;
 }
 
 .questionList {

jsapp/js/components/processing/sidebar/sidebarDisplaySettings.tsx

@@ -11,16 +11,21 @@ import ToggleSwitch from 'js/components/common/toggleSwitch';
 import Button from 'js/components/common/button';
 import {AsyncLanguageDisplayLabel} from 'js/components/languages/languagesUtils';
 import type {LanguageCode} from 'js/components/languages/languagesStore';
-import type {AssetContent} from 'js/dataInterface';
 import {getActiveTab} from 'js/components/processing/routes.utils';
 import styles from './sidebarDisplaySettings.module.scss';
 import MultiCheckbox from 'js/components/common/multiCheckbox';
 import type {MultiCheckboxItem} from 'js/components/common/multiCheckbox';
 import cx from 'classnames';
+import KoboSelect from 'js/components/common/koboSelect';
 
 export default function SidebarDisplaySettings() {
   const [store] = useState(() => singleProcessingStore);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [labelLanguage, setLabelLanguage] = useState<LanguageCode | string>(
+    store.getCurrentlyDisplayedLanguage()
+  );
+
+  const displayedLanguageList = store.getDisplayedLanguagesList();
 
   const activeTab = getActiveTab();
 
@@ -159,7 +164,13 @@ export default function SidebarDisplaySettings() {
         }}
         size='medium'
       >
-        <KoboModalHeader>{t('Customize display settings')}</KoboModalHeader>
+        <KoboModalHeader
+          onRequestCloseByX={() => {
+            setSelectedDisplays(store.getDisplays(activeTab));
+            setSelectedFields(getInitialFields());
+            setIsModalOpen(false);
+          }}
+        >{t('Customize display settings')}</KoboModalHeader>
 
         <KoboModalContent>
           <p className={styles.description}>
@@ -169,6 +180,22 @@ export default function SidebarDisplaySettings() {
           </p>
 
           <ul className={styles.options}>
+            <li className={styles.display}>
+              <KoboSelect
+                label={t('Display labels or XML values?')}
+                name='displayedLanguage'
+                type='outline'
+                size='s'
+                options={displayedLanguageList}
+                selectedOption={labelLanguage}
+                onChange={(languageCode) => {
+                  if (languageCode) {
+                    setLabelLanguage(languageCode);
+                  }
+                }}
+              />
+            </li>
+
             {availableDisplays.map((entry) => {
               const isEnabled = selectedDisplays.includes(entry);
 
@@ -234,7 +261,7 @@ export default function SidebarDisplaySettings() {
         <KoboModalFooter alignment='center'>
           {/* This button resets the displays for current tab. */}
           <Button
-            label={<strong>{t('Reset')}</strong>}
+            label={t('Reset')}
             type='frame'
             color='light-blue'
             size='m'
@@ -245,19 +272,21 @@ export default function SidebarDisplaySettings() {
               // when the modal is closed.
               resetFieldsSelection();
               setSelectedDisplays(store.getDisplays(activeTab));
+              setLabelLanguage(store.getCurrentlyDisplayedLanguage());
               setIsModalOpen(false);
             }}
           />
 
           {/* Applies current selection of displays to the sidebar. */}
           <Button
-            label={<strong>{t('Apply selection')}</strong>}
+            label={t('Apply selection')}
             type='full'
             color='light-blue'
             size='m'
             onClick={() => {
               applyFieldsSelection();
               store.setDisplays(activeTab, selectedDisplays);
+              store.setCurrentlyDisplayedLanguage(labelLanguage);
               setIsModalOpen(false);
             }}
           />

jsapp/js/components/processing/sidebar/sidebarSubmissionData.tsx

@@ -1,12 +1,12 @@
 import React, {useState} from 'react';
 import SubmissionDataList from 'js/components/submissions/submissionDataList';
 import singleProcessingStore from 'js/components/processing/singleProcessingStore';
-import type {AssetContent} from 'js/dataInterface';
+import type {AssetContent, AssetResponse} from 'js/dataInterface';
 import {META_QUESTION_TYPES, ADDITIONAL_SUBMISSION_PROPS} from 'js/constants';
 import styles from './sidebarSubmissionData.module.scss';
 
 interface SidebarSubmissionDataProps {
-  assetContent: AssetContent | undefined;
+  asset: AssetResponse;
 }
 
 export default function SidebarSubmissionData(
@@ -16,7 +16,7 @@ export default function SidebarSubmissionData(
 
   const submissionData = store.getSubmissionData();
 
-  if (!props.assetContent) {
+  if (!props.asset.content) {
     return null;
   }
 
@@ -41,7 +41,7 @@ export default function SidebarSubmissionData(
       <div className={styles.dataListBody}>
         {submissionData && (
           <SubmissionDataList
-            assetContent={props.assetContent}
+            asset={props.asset}
             submissionData={submissionData}
             hideQuestions={getQuestionsToHide()}
             hideGroups

jsapp/js/components/processing/singleProcessingHeader.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import {QUESTION_TYPES, META_QUESTION_TYPES} from 'js/constants';
-import type {AssetContent} from 'js/dataInterface';
+import type {AssetContent, AssetResponse} from 'js/dataInterface';
 import {
   findRowByQpath,
   getRowTypeIcon,
   getTranslatedRowLabel,
   getRowName,
+  getLanguageIndex,
 } from 'js/assetUtils';
 import {ROUTES} from 'js/router/routerConstants';
 import Button from 'js/components/common/button';
@@ -22,7 +23,7 @@ import classNames from 'classnames';
 interface SingleProcessingHeaderProps extends WithRouterProps {
   submissionEditId: string;
   assetUid: string;
-  assetContent: AssetContent;
+  asset: AssetResponse;
 }
 
 interface SingleProcessingHeaderState {
@@ -86,9 +87,19 @@ class SingleProcessingHeader extends React.Component<
   getQuestionSelectorOptions() {
     const options: KoboSelectOption[] = [];
     const editIds = singleProcessingStore.getSubmissionsEditIds();
+    const assetContent = this.props.asset.content;
+    const languageIndex = getLanguageIndex(
+      this.props.asset,
+      singleProcessingStore.getCurrentlyDisplayedLanguage()
+    );
+
+    if (!assetContent) {
+      return [];
+    }
+
     if (editIds) {
       Object.keys(editIds).forEach((qpath) => {
-        const questionData = findRowByQpath(this.props.assetContent, qpath);
+        const questionData = findRowByQpath(assetContent, qpath);
         // At this point we want to find out whether the question has at least
         // one editId (i.e. there is at least one transcriptable response to
         // the question). Otherwise there's no point in having the question as
@@ -107,8 +118,8 @@ class SingleProcessingHeader extends React.Component<
             const rowName = getRowName(questionData);
             const translatedLabel = getTranslatedRowLabel(
               rowName,
-              this.props.assetContent.survey,
-              0
+              assetContent.survey,
+              languageIndex
             );
             options.push({
               value: qpath,

jsapp/js/components/processing/singleProcessingRoute.tsx

@@ -160,7 +160,7 @@ export default class SingleProcessingRoute extends React.Component<
             <SingleProcessingHeader
               submissionEditId={this.props.params.submissionEditId}
               assetUid={this.props.params.uid}
-              assetContent={this.state.asset.content}
+              asset={this.state.asset}
             />
           </section>
 

jsapp/js/components/processing/singleProcessingStore.ts

@@ -12,6 +12,7 @@ import {
   getRowName,
   getRowNameByQpath,
   getFlatQuestionsList,
+  getLanguageIndex,
 } from 'js/assetUtils';
 import type {SurveyFlatPaths} from 'js/assetUtils';
 import assetStore from 'js/assetStore';
@@ -34,6 +35,7 @@ import {
   getCurrentProcessingRouteParts,
   ProcessingTab,
 } from 'js/components/processing/routes.utils';
+import type {KoboSelectOption} from 'js/components/common/koboSelect';
 import {getExponentialDelayTime} from 'jsapp/js/utils';
 import envStore from 'jsapp/js/envStore';
 
@@ -127,6 +129,7 @@ interface SingleProcessingStoreData {
   isFetchingData: boolean;
   isPollingForTranscript: boolean;
   hiddenSidebarQuestions: string[];
+  currentlyDisplayedLanguage: LanguageCode | string;
   exponentialBackoffCount: number;
 }
 
@@ -158,6 +161,7 @@ class SingleProcessingStore extends Reflux.Store {
     isFetchingData: false,
     isPollingForTranscript: false,
     hiddenSidebarQuestions: [],
+    currentlyDisplayedLanguage: this.getInitialDisplayedLanguage(),
     exponentialBackoffCount: 1,
   };
 
@@ -171,6 +175,7 @@ class SingleProcessingStore extends Reflux.Store {
     this.data.translationDraft = undefined;
     this.data.source = undefined;
     this.data.isPristine = true;
+    this.data.currentlyDisplayedLanguage = this.getInitialDisplayedLanguage();
     this.data.exponentialBackoffCount = 1;
   }
 
@@ -968,6 +973,41 @@ class SingleProcessingStore extends Reflux.Store {
     );
   }
 
+  getDisplayedLanguagesList(): KoboSelectOption[] {
+    const languagesList = [];
+
+    languagesList.push({label: t('XML names'), value: 'xml_names'});
+    const asset = assetStore.getAsset(this.currentAssetUid);
+    const baseLabel = t('Labels');
+
+    if (asset?.summary?.languages && asset?.summary?.languages.length > 0) {
+      asset.summary.languages.forEach((language) => {
+        let label = baseLabel;
+        if (language !== null) {
+          label += ` - ${language}`;
+        }
+        languagesList.push({label: label, value: language});
+      });
+    } else {
+      languagesList.push({label: baseLabel, value: ''});
+    }
+
+    return languagesList;
+  }
+
+  getInitialDisplayedLanguage() {
+    const asset = assetStore.getAsset(this.currentAssetUid);
+    if (asset?.summary?.languages && asset?.summary?.languages[0]) {
+      return asset?.summary?.languages[0];
+    } else {
+      return '';
+    }
+  }
+
+  getCurrentlyDisplayedLanguage() {
+    return this.data.currentlyDisplayedLanguage;
+  }
+
   getInitialDisplays(): SidebarDisplays {
     return {
       transcript: DefaultDisplays.get(ProcessingTab.Transcript) || [],
@@ -1000,7 +1040,10 @@ class SingleProcessingStore extends Reflux.Store {
     const asset = assetStore.getAsset(this.currentAssetUid);
 
     if (asset?.content?.survey) {
-      const questionsList = getFlatQuestionsList(asset.content.survey, 0)
+      const questionsList = getFlatQuestionsList(
+        asset.content.survey,
+        getLanguageIndex(asset, this.data.currentlyDisplayedLanguage)
+      )
         .filter((question) => !(question.name === this.currentQuestionName))
         .map((question) => {
           // We make an object to show the question label to the user but use the
@@ -1071,6 +1114,12 @@ class SingleProcessingStore extends Reflux.Store {
 
     this.trigger(this.data);
   }
+
+  setCurrentlyDisplayedLanguage(language: LanguageCode) {
+    this.data.currentlyDisplayedLanguage = language;
+
+    this.trigger(this.data);
+  }
 }
 
 /**