Merge branch 'develop'

Makefile

@@ -12,25 +12,24 @@ dev: start
 .PHONY: playwright-tests-ci
 playwright-tests-ci:
 	npm ci
-	$(MAKE) playwright-tests
+	$(MAKE) playwright-app
+	npx playwright install chromium && npx playwright test
 
 .PHONY: playwright-tests
 playwright-tests:
 	npm install
+	$(MAKE) playwright-app
+	docker compose up -d ui-builder
+	npx playwright install chromium && npx playwright test $(params)
 
-    # stop any containers that are running
-	docker compose down
-
+.PHONY: playwright-app
+playwright-app:
     # delete any cached session storage state files if the service isn't running
 	docker compose ps app-for-playwright > /dev/null 2>&1 || rm -f *-storageState.json
-
 	docker compose up -d app-for-playwright
-
     # wait until the app-for-playwright service is serving up HTTP before continuing
 	until curl localhost:3238 > /dev/null 2>&1; do sleep 1; done
 
-	npx playwright install chromium && npx playwright test $(params)
-
 .PHONY: e2e-tests
 e2e-tests:
 	docker compose build app-for-e2e test-e2e

docker-compose.yml

@@ -325,6 +325,10 @@ services:
     volumes:
       - ./test/e2e/utils/TestControl.php:/var/www/src/Api/Service/TestControl.php
       - ./test/e2e/shared-files:/tmp/e2e-shared-files
+      - lf-ui-dist:/var/www/html/dist
+
+      # needed this volume mapping so changes to partials would be reflected in running app (e.g. HTML)
+      - ./src/angular-app:/var/www/src/angular-app
 
   test-php:
     build:

playwright.config.ts

@@ -26,12 +26,17 @@ const config: PlaywrightTestConfig = {
   /* Global setup for things like logging in users and saving login cookies */
   globalSetup: require.resolve('./test/e2e/utils/globalSetup'),
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 1 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   outputDir: 'test-results', // referenced in pull-request.yml
-  reporter: process.env.CI ? [['github'], ['list']] : [['html', {outputFolder: 'test-results/_html-report'}]],
+  reporter: process.env.CI
+    ? [['github'], ['list']]
+    // Putting the HTML report in a subdirectory of the main output directory results in a warning log
+    // stating that it will "lead to artifact loss" but the warning in this case is not accurate
+    // npx playwright show-report test-results/_html-report
+    : [['html', {outputFolder: 'test-results/_html-report', open: 'never'}]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -101,7 +106,7 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'docker compose up app-for-playwright',
+    command: 'make playwright-app',
     port: 3238,
     timeout: 15 * 1000,
     reuseExistingServer: true,

src/Api/Model/Languageforge/Lexicon/Command/LexUploadCommands.php

@@ -98,7 +98,7 @@ public static function uploadAudioFile($projectId, $mediaType, $tmpFilePath)
 
                 $extensionlessFileName = substr($fileName, 0, strrpos($fileName, strtolower($fileExt)));
                 $fileName = "$extensionlessFileName.webm"; //$fileName ->> the converted file
-                `ffmpeg -i $tmpFilePath -acodec opus $fileName 2> /dev/null`; //original file is at the tmpFilePath. convert that file and save it to be $fileName
+                `ffmpeg -i $tmpFilePath -c:a libopus $fileName 2> /dev/null`; //original file is at the tmpFilePath. convert that file and save it to be $fileName
                 $filePath = self::mediaFilePath($folderPath, $fileNamePrefix, $fileName);
                 $moveOk = copy($fileName, $filePath);
 

src/angular-app/languageforge/lexicon/settings/configuration/configuration-fields.component.html

@@ -106,26 +106,22 @@
             </tr>
             <tr style="background-color: initial">
                 <td></td>
-                <th class="text-left align-middle">
-                    <button type="button" class="btn btn-std" data-ng-click="$ctrl.fccAddInputSystem()"
-                            id="add-input-system-btn" title="Add an Input System">
-                        <i class="fa fa-plus"></i>
-                    </button>
-                </th>
-                <td colspan="6"></td>
-                <!--suppress JSUnusedLocalSymbols -->
-                <td data-ng-repeat="group in $ctrl.unifiedViewModel.inputSystems.selectAllColumns.groups"></td>
-                <td></td>
-            </tr>
-            <tr style="background-color: initial; height: 2rem">
-                <td></td>
-                <th></th>
                 <td colspan="6"></td>
                 <!--suppress JSUnusedLocalSymbols -->
                 <td data-ng-repeat="group in $ctrl.unifiedViewModel.inputSystems.selectAllColumns.groups"></td>
                 <td></td>
             </tr>
         </tbody>
+        <tr style="background-color: initial; height: 4rem">
+            <td></td>
+            <th class="text-left align-top">
+                <small>To add input systems, please use FieldWorks (FLEx).</small>
+            </th>
+            <td colspan="6"></td>
+            <!--suppress JSUnusedLocalSymbols -->
+            <td data-ng-repeat="group in $ctrl.unifiedViewModel.entryFields.selectAllColumns.groups"></td>
+            <td></td>
+        </tr>
         <tbody drag-to-reorder-bind="$ctrl.unifiedViewModel.entryFields.settings">
             <tr class="table-secondary" id="entry-header">
                 <th class="text-center align-top"></th>

src/angular-app/languageforge/lexicon/settings/configuration/configuration-input-systems.component.html

@@ -1,12 +1,9 @@
+<div style="padding: 10px">
+    <small>To add input systems, please use FieldWorks (FLEx).</small>
+</div>
 <div class="row">
     <!-- Left column: input system list -->
     <div class="col-md-3">
-        <!-- control buttons -->
-        <div class="form-group">
-            <button class="btn btn-sm btn-primary" id="configuration-new-btn" data-ng-click="$ctrl.openNewLanguageModal($ctrl.suggestedLanguageCodes)">
-                <i class="fa fa-plus iconPadding"></i>New</button>
-        </div>
-
         <!-- picklist -->
         <dl class="picklists" style="height: 300px; overflow: auto;">
             <dt>Language Names</dt>
@@ -25,30 +22,6 @@
 
     <!-- Right column: input system setup -->
     <div class="col-md-9 settings-panel">
-        <!-- control buttons -->
-        <div uib-dropdown class="dropdown form-group btn-group">
-            <button uib-dropdown-toggle class="btn btn-sm btn-std pui-no-caret" id="configuration-dropdown-btn"><i class="fa fa-ellipsis-v"></i></button>
-            <div class="dropdown-menu" uib-dropdown-menu>
-                <a href class="dropdown-item" id="configuration-add-ipa-btn" tabindex="-1" data-ng-class="{disabled: $ctrl.newExists($ctrl.selects.special.optionsOrder[1])}"
-                   data-ng-click="$ctrl.addInputSystem($ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].language, $ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName, $ctrl.selects.special.optionsOrder[1])">
-                    <i class="fa fa-plus"></i> Add IPA for
-                    <span class="notranslate">{{$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName}}</span></a>
-                <a href class="dropdown-item" id="configuration-add-voice-btn" tabindex="-1" data-ng-class="{disabled: $ctrl.newExists($ctrl.selects.special.optionsOrder[2])}"
-                   data-ng-click="$ctrl.addInputSystem($ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].language, $ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName, $ctrl.selects.special.optionsOrder[2])">
-                    <i class="fa fa-plus"></i> Add Voice for
-                    <span class="notranslate">{{$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName}}</span></a>
-                <a href class="dropdown-item" id="configuration-add-variant-btn" tabindex="-1"
-                   data-ng-click="$ctrl.addInputSystem($ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].language, $ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName, $ctrl.selects.special.optionsOrder[3])">
-                    <i class="fa fa-plus"></i> Add a variant of
-                    <span class="notranslate">{{$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName}}</span></a>
-                <div class="dropdown-divider" data-ng-show="! $ctrl.isInputSystemInUse()"></div>
-                <a href class="dropdown-item" id="configuration-remove-btn" data-ng-show="! $ctrl.isInputSystemInUse()" tabindex="-1"
-                   data-ng-click="$ctrl.removeInputSystem($ctrl.selectedInputSystemId)">
-                    <i class="fa fa-trash"></i> Remove
-                    <span class="notranslate">{{$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].languageDisplayName()}}</span></a>
-            </div>
-        </div>
-
         <!-- settings -->
         <div class="card card-body bg-light" data-ng-show="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId]">
             <label class="col-form-label float-right">{{$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.tag}}</label>
@@ -57,7 +30,7 @@ <h3 data-ng-show="!$ctrl.isUnlistedLanguage($ctrl.iscInputSystemViewModels[$ctrl
                 {{$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].languageDisplayName()}}</h3>
             <!-- unlisted language name -->
             <!--suppress HtmlFormInputWithoutLabel -->
-            <input type="text" id="languageName" style="font-size: 1.35em; color: black; font-weight: 700; border: 0; height: 32px; width: 365px"
+            <input type="text" id="languageName" style="font-size: 1.35em; color: black; font-weight: 700; height: 32px; width: 365px"
                 data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].inputSystem.languageName"
                 data-ng-show="$ctrl.isUnlistedLanguage($ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].language)">
             <div class="form-group">
@@ -80,16 +53,16 @@ <h3 data-ng-show="!$ctrl.isUnlistedLanguage($ctrl.iscInputSystemViewModels[$ctrl
             </div>
             <br>
             <p class="text-warning" data-ng-show="$ctrl.isInputSystemInUse()">
-                <small>Some settings are disabled because the Input System may already be in use.</small>
+                <small>Some settings are disabled. Please edit these in Fieldworks (FLEx).</small>
             </p>
             <div class="form-group">
                 <label class="col-form-label" for="special">Special</label>
                 <div class="controls">
-                    <select class="form-control custom-select" id="special"
+                    <input type="text" class="form-control" id="special"
                         data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].special"
-                        data-ng-disabled="$ctrl.isInputSystemInUse()"
                         data-ng-change="$ctrl.specialChanged($ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].special)"
-                        data-ng-options="$ctrl.selects.special.options[key] for key in $ctrl.selects.special.optionsOrder"></select>
+                        disabled>
+                    </input>
                 </div>
             </div>
 
@@ -98,18 +71,17 @@ <h3 data-ng-show="!$ctrl.isUnlistedLanguage($ctrl.iscInputSystemViewModels[$ctrl
             <div class="form-group" data-ng-show="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].special == $ctrl.selects.special.optionsOrder[1]">
                 <label class="col-form-label" for="purpose">Purpose</label>
                 <div class="controls">
-                    <select class="form-control custom-select" id="purpose"
+                    <input type="text" class="form-control" id="purpose"
                         data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].purpose"
-                        data-ng-disabled="$ctrl.isInputSystemInUse()"
-                        data-ng-options="$ctrl.selects.purpose.options[key] for key in $ctrl.selects.purpose.optionsOrder">
-                        <option value="">unspecified</option></select>
+                        disabled>
+                    </input>
                 </div>
                 <label class="col-form-label" for="ipaVariant">Variant (limited to letters or numbers, no spaces)</label>
                 <div class="controls">
                     <input type="text" class="form-control" id="ipaVariant" size="25"
                           model-transform-limit="35" model-transform-no-space data-ng-trim="false"
                            data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].variantString"
-                           data-ng-disabled="$ctrl.isInputSystemInUse()">
+                           disabled>
                 </div>
             </div>
             <!-- Voice -->
@@ -119,33 +91,31 @@ <h3 data-ng-show="!$ctrl.isUnlistedLanguage($ctrl.iscInputSystemViewModels[$ctrl
                     <input type="text" class="form-control" id="voiceVariant" size="25"
                            model-transform-limit="35" model-transform-no-space data-ng-trim="false"
                            data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].variantString"
-                           data-ng-disabled="$ctrl.isInputSystemInUse()">
+                           disabled>
                 </div>
             </div>
             <!-- Script / Region / Variant -->
             <div class="form-group" data-ng-show="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].special == $ctrl.selects.special.optionsOrder[3]">
                 <label class="col-form-label" for="script">Script</label>
                 <div class="controls">
-                    <select class="form-control custom-select" id="script"
+                    <input type="text" class="form-control" id="script"
                         data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].script"
-                        data-ng-disabled="$ctrl.isInputSystemInUse()"
-                        data-ng-options="key as option.join(', ') for (key, option) in $ctrl.selects.script.options">
-                        <option value="">-- select a script --</option></select>
+                        disabled>
+                    </input>
                 </div>
                 <label class="col-form-label" for="region">Region</label>
                 <div class="controls">
-                    <select class="form-control custom-select" id="region"
+                    <input type="text" class="form-control" id="region"
                         data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].region"
-                        data-ng-disabled="$ctrl.isInputSystemInUse()"
-                        data-ng-options="key as option for (key, option) in $ctrl.selects.region.options">
-                        <option value="">-- select a region --</option></select>
+                        disabled>
+                    </input>
                 </div>
                 <label class="col-form-label" for="variant">Variant (limited to letters or numbers, no spaces)</label>
                 <div class="controls">
                     <input type="text" class="form-control" id="variant" size="25"
                         model-transform-limit="35" model-transform-no-space data-ng-trim="false"
                         data-ng-model="$ctrl.iscInputSystemViewModels[$ctrl.selectedInputSystemId].variantString"
-                        data-ng-disabled="$ctrl.isInputSystemInUse()">
+                        disabled>
                 </div>
             </div>
             </div>

src/angular-app/languageforge/lexicon/settings/configuration/configuration-input-systems.component.ts

@@ -64,14 +64,6 @@ export class InputSystemsConfigurationController implements angular.IController
     ) {
       this.selectInputSystem(this.iscInputSystemsList[0].uuid);
     }
-
-    const addInputSystemChange = changes.iscAddInputSystem as angular.IChangesObject<boolean>;
-    if (addInputSystemChange != null && addInputSystemChange.currentValue) {
-      this.openNewLanguageModal(this.suggestedLanguageCodes);
-      this.iscOnUpdate({ $event: {
-        addInputSystem: false
-      } });
-    }
   }
 
   isInputSystemInUse(): boolean {
@@ -176,34 +168,6 @@ export class InputSystemsConfigurationController implements angular.IController
     return (code === 'qaa');
   }
 
-  openNewLanguageModal(suggestedLanguageCodes: any): void {
-    const modalInstance = this.$modal.open({
-      templateUrl: '/angular-app/languageforge/lexicon/shared/select-new-language.modal.html',
-      windowTopClass: 'modal-select-language',
-      controller: ['$scope', '$uibModalInstance',
-        (scope: any, $modalInstance: angular.ui.bootstrap.IModalInstanceService) => {
-          scope.selected = {
-            code: '',
-            language: {}
-          };
-          scope.add = () => {
-            $modalInstance.close(scope.selected);
-          };
-
-          scope.close = $modalInstance.dismiss;
-
-          scope.suggestedLanguageCodes = suggestedLanguageCodes;
-        }
-      ]
-    });
-
-    modalInstance.result.then((selected: any) => {
-      this.addInputSystem(selected.code, selected.language.name,
-        this.selects.special.optionsOrder[0]);
-    }, () => { });
-
-  }
-
 }
 
 export const InputSystemsConfigurationComponent: angular.IComponentOptions = {

src/angular-app/languageforge/lexicon/settings/project-settings.component.html

@@ -27,7 +27,7 @@
                     </div>
                     <div class="form-group row">
                         <label class="col-form-label col-12">Project Owner</label>
-                        <div id="e2e-test-project-owner" class="controls col-12 notranslate">
+                        <div data-testid="e2e-test-project-owner" class="controls col-12 notranslate">
                             {{$ctrl.project.ownerRef.username}}
                         </div>
                     </div>

test/app/languageforge/lexicon-traversal.e2e-spec.ts

@@ -24,10 +24,6 @@ describe('Lexicon E2E Page Traversal', () => {
       await configurationPage.tabs.unified.click();
       await configurationPage.unifiedPane.inputSystem.addGroupButton.click();
       await browser.$('body').sendKeys(protractor.Key.ESCAPE);
-      await browser.wait(
-        ExpectedConditions.elementToBeClickable(configurationPage.unifiedPane.inputSystem.addInputSystemButton),
-        constants.conditionTimeout);
-      await configurationPage.unifiedPane.inputSystem.addInputSystemButton.click();
       await browser.$('body').sendKeys(protractor.Key.ESCAPE);
       await browser.wait(ExpectedConditions.elementToBeClickable(configurationPage.tabs.unified), constants.conditionTimeout);
       await configurationPage.tabs.unified.click();

test/app/languageforge/lexicon/settings/config-fields.e2e-spec.ts

@@ -45,7 +45,6 @@ describe('Lexicon E2E Configuration Fields', () => {
     expect<any>(await configPage.applyButton.isDisplayed()).toBe(true);
     expect<any>(await configPage.applyButton.isEnabled()).toBe(false);
     await configPage.tabs.unified.click();
-    expect<any>(await configPage.unifiedPane.inputSystem.addInputSystemButton.isDisplayed()).toBe(true);
   });
 
   it('check Apply button is enabled on changes', async () => {