Merge branch 'master' into refactor/app-data-evaluator

.github/ISSUE_TEMPLATE/bug_report.md

@@ -16,11 +16,11 @@ _Specify the version of the app where this bug was first identified._
 **To Reproduce**
 _Describe the steps to reproduce this bug._
 
-**Template Name**
-_Specify the template name and include a link where the bug appears if appropriate._
+**Deployment Sheet(s)**
+_Specify the sheet name and include a link where the bug appears if appropriate._
 
-**Debug Template**
-_If you have a debug template to show demonstrate the bug specify its name and provide a link._
+**Debug Sheet(s)**
+_If you have a debug sheet to show demonstrate the bug specify its name and provide a link._
 
 **Screenshots and videos**
 _If applicable, add screenshots or videos to help explain your problem._

.github/workflows/reusable-android-release.yml

@@ -20,6 +20,19 @@ name: Android - Release to Google Play
 
 on:
  workflow_call:
+   secrets: 
+    FIREBASE_SERVICE_ACCOUNT:
+      required: true
+    GOOGLE_SERVICES_JSON: 
+      required: true
+    SIGNING_KEY: 
+      required: true
+    ALIAS: 
+      required: true
+    KEY_STORE_PASSWORD: 
+      required: true
+    KEY_PASSWORD: 
+      required: true
 
 jobs:
     build:

.github/workflows/reusable-content-sync.yml

@@ -17,10 +17,9 @@ env:
   PARENT_DEPLOYMENT_REPO: ${{vars.PARENT_DEPLOYMENT_REPO}}
   PARENT_DEPLOYMENT_NAME: ${{vars.PARENT_DEPLOYMENT_NAME}}
   PARENT_DEPLOYMENT_BRANCH: ${{vars.PARENT_DEPLOYMENT_BRANCH}}
-  DEPLOYMENT_PRIVATE_KEY: ${{secrets.DEPLOYMENT_PRIVATE_KEY}}
-  FIREBASE_CONFIG: ${{secrets.FIREBASE_CONFIG}}  
   GDRIVE_CREDENTIALS: ${{ secrets.GDRIVE_CREDENTIALS }} 
   GDRIVE_TOKEN:  ${{ secrets.GDRIVE_TOKEN }}
+  PAT: ${{ secrets.PAT }}
 
 
 name: Perform content sync and create a PR
@@ -33,11 +32,18 @@ on:
         pr-title:
           description: Title for PR
           type: string
-          default: sync content from google sheets
+          default: sync content from Google Sheets
         pr-body:
           description: Description for PR
           type: string
           default: Automated PR creation from actions
+      secrets:  # Declare secrets you expect to receive
+        GDRIVE_CREDENTIALS:
+          required: true
+        GDRIVE_TOKEN:
+          required: true
+        PAT:
+          required: true
 
 jobs:
    build:
@@ -67,11 +73,7 @@ jobs:
         with:
           token: ${{ secrets.PAT }}
           path: ".idems_app/deployments/${{env.DEPLOYMENT_NAME}}"
-
-      - name: Populate Encryption key
-        if: env.DEPLOYMENT_PRIVATE_KEY != ''
-        run: echo "${{env.DEPLOYMENT_PRIVATE_KEY}}" > ./.idems_app/deployments/${{env.DEPLOYMENT_NAME}}/encrypted/private.key
-
+
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
@@ -119,7 +121,7 @@ jobs:
       - name: Create Pull Request
         uses: peter-evans/[email protected]
         with:
-          token: ${{ secrets.PAT }}
+          token: ${{ env.PAT }}
           # Relative path under $GITHUB_WORKSPACE to the repository. Defaults to $GITHUB_WORKSPACE.
           path: .idems_app/deployments/${{env.DEPLOYMENT_NAME}}             
           # The title of the pull request.

packages/scripts/src/commands/deployment/set.ts

@@ -68,7 +68,7 @@ export class DeploymentSet {
     }
   }
 
-  private async promptDeploymentSelect() {
+  public async promptDeploymentSelect() {
     const deploymentNames = fs
       .readdirSync(DEPLOYMENTS_PATH, { withFileTypes: true })
       .filter((d) => d.isDirectory())

packages/scripts/src/commands/deployment/utils.ts

@@ -63,6 +63,7 @@ function parseConfigJson(json: IDeploymentConfigJson) {
 /**
  * Decide if a config needs recompiling by checking if modified timestamps
  * on the .ts and .json files are the same (applied during compilation)
+ * TODO - also consider files from encrypted or other imports (e.g. skins)
  */
 function isConfigUpToDate(tsPath: string, jsonPath: string) {
   const json = fs.readJSONSync(jsonPath) as IDeploymentConfigJson;

packages/workflows/src/deployment.workflows.ts

@@ -1,3 +1,4 @@
+import { DeploymentSet } from "../../scripts/src/commands/deployment/set";
 import type { IDeploymentWorkflows } from "./workflow.model";
 /** Default workflows made available to all deployments */
 const workflows: IDeploymentWorkflows = {
@@ -85,17 +86,26 @@ const workflows: IDeploymentWorkflows = {
         ],
         label: "Set active deployment",
         steps: [
+          // Prompt deployment name if not specified
           {
-            name: "deployment set",
-            function: async ({ tasks, args }) => {
-              await tasks.deployment.set(args[0]);
+            name: "deployment prompt",
+            condition: async ({ args }) => !args[0],
+            function: async ({ args }) => {
+              const deploymentName = await new DeploymentSet().promptDeploymentSelect();
+              args[0] = deploymentName;
             },
           },
-          // Ensure deployment decrypted once set
+          // Attempt to decrypt config before setting (so that it can populate to config json)
           {
             name: "decrypt",
-            function: async ({ tasks }) => {
-              await tasks.encryption.decrypt();
+            function: async ({ tasks, args }) => {
+              await tasks.encryption.decrypt(args[0]);
+            },
+          },
+          {
+            name: "deployment set",
+            function: async ({ tasks, args }) => {
+              await tasks.deployment.set(args[0]);
             },
           },
           {

src/app/shared/components/template/components/audio/audio.component.html

@@ -4,24 +4,26 @@
       <h3>{{ params.title }}</h3>
       @if (params.variant.includes("large") && params.showInfoButton) {
         <div class="info-icon-container">
-          @if (params.infoIconAsset) {
-            <ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
-          } @else {
-            <ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
-          }
+          <ion-button fill="clear" class="action-button" (click)="handleActionButtonClick()">
+            @if (params.infoIconAsset) {
+              <ion-icon slot="icon-only" [src]="params.infoIconAsset | plhAsset"></ion-icon>
+            } @else {
+              <ion-icon slot="icon-only" name="document-text-outline"></ion-icon>
+            }
+          </ion-button>
         </div>
       }
     </div>
   }
   <div class="second-row">
     @if (params.variant.includes("compact") && params.showInfoButton) {
-      <div class="info-icon-container">
+      <ion-button fill="clear" class="action-button" (click)="handleActionButtonClick()">
         @if (params.infoIconAsset) {
-          <ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
+          <ion-icon slot="icon-only" [src]="params.infoIconAsset | plhAsset"></ion-icon>
         } @else {
-          <ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
+          <ion-icon slot="icon-only" name="document-text-outline"></ion-icon>
         }
-      </div>
+      </ion-button>
     }
     <div class="progress-block" [class.disabled]="params.rangeBarDisabled || !player">
       <ion-range

src/app/shared/components/template/components/audio/audio.component.scss

@@ -30,6 +30,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
   .second-row {
     display: flex;
     flex-direction: row-reverse;
+    align-items: center;
 
     .controls {
       @include mixins.flex-space-between;
@@ -58,7 +59,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
     .progress-block {
       width: 100%;
       display: flex;
-      margin-left: var(--small-margin);
+      margin: 0 var(--tiny-margin);
       ion-range {
         width: 100%;
         --bar-background: var(--ion-color-gray-200);
@@ -77,13 +78,9 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
         }
       }
     }
-    .info-icon-container {
-      @include mixins.flex-centered;
-      margin-left: var(--small-margin);
-      ion-icon {
-        color: var(--ion-color-primary);
-        font-size: var(--icon-size-tiny);
-      }
+    ion-button.action-button {
+      --padding-start: 2px;
+      --padding-end: 2px;
     }
   }
 }
@@ -113,12 +110,9 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
       font-weight: var(--font-weight-bold);
       font-size: var(--audio-title-size);
     }
-    .info-icon-container {
-      @include mixins.flex-centered;
-      ion-icon {
-        color: var(--ion-color-primary);
-        font-size: var(--icon-size-small);
-      }
+    ion-button.action-button {
+      --padding-start: 2px;
+      --padding-end: 2px;
     }
   }
 

src/app/shared/components/template/components/audio/audio.component.ts

@@ -9,6 +9,8 @@ import { Howl } from "howler";
 import { ITemplateRowProps } from "../../models";
 import { TemplateBaseComponent } from "../base";
 import { PLHAssetPipe } from "../../pipes/plh-asset.pipe";
+import { ModalController } from "@ionic/angular";
+import { TemplatePopupComponent } from "../layout/popup/popup.component";
 
 // Names of ion-icons to be used by default in the player.
 // Will be overridden if user provides values for play_icon_asset, pause_icon_asset or forward_icon_asset
@@ -27,19 +29,27 @@ interface IAudioParams {
   playIconAsset: string;
   /** TEMPLATE PARAMETER: "pause_icon_asset". The path to an svg to override the default pause icon. Default icon is ion's "pause-outline" */
   pauseIconAsset: string;
-  /** TEMPLATE PARAMETER: "forward_icon_asset". The path to an svg to override the default forward icon.
+  /**
+   * TEMPLATE PARAMETER: "forward_icon_asset". The path to an svg to override the default forward icon.
    * Will be mirrored to be used as the reqind icon. Default icon is ion's "play-forward"
    * */
   forwardIconAsset: string;
   /** TEMPLATE PARAMETER: "show_info_button". Should show the info button. Default false (unless info_icon_asset is provided) */
   showInfoButton: boolean;
   /** TEMPLATE PARAMETER: "info_icon_asset". The path to an svg to override the default info icon. The default is an icon indicating a transcript */
   infoIconAsset: string;
-  /** TEMPLATE PARAMETER: "range_bar_disabled". If true, the use cannot scrub through the audio using the range bar.
+  /**
+   * TEMPLATE PARAMETER: "transcript_text". A string representing the transcript of the audio.
+   * If provided, the transcript button will be shown and will launch a popup containing the this text
+   */
+  transcriptText: string;
+  /**
+   * TEMPLATE PARAMETER: "range_bar_disabled". If true, the use cannot scrub through the audio using the range bar.
    * Default false.
    */
   rangeBarDisabled: boolean;
-  /** TEMPLATE PARAMETER: "time_to_skip". The increment of time, in seconds, that will be applied when clicking the forward or backward buttons.
+  /**
+   * TEMPLATE PARAMETER: "time_to_skip". The increment of time, in seconds, that will be applied when clicking the forward or backward buttons.
    * Default 15.
    */
   timeToSkip: number;
@@ -83,7 +93,10 @@ export class TmplAudioComponent
   /** @ignore */
   trackerInterval: NodeJS.Timeout;
 
-  constructor(private plhAssetPipe: PLHAssetPipe) {
+  constructor(
+    private plhAssetPipe: PLHAssetPipe,
+    private modalCtrl: ModalController
+  ) {
     super();
   }
 
@@ -92,6 +105,14 @@ export class TmplAudioComponent
     this.initPlayer();
   }
 
+  public async handleActionButtonClick() {
+    if (this.params.transcriptText) {
+      await this.openTranscriptPopup();
+    } else {
+      await this.triggerActions("info_click");
+    }
+  }
+
   private getParams() {
     this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "compact")
       .split(",")
@@ -113,8 +134,10 @@ export class TmplAudioComponent
     );
     this.params.title = getStringParamFromTemplateRow(this._row, "title", "");
     this.params.infoIconAsset = getStringParamFromTemplateRow(this._row, "info_icon_asset", null);
+    this.params.transcriptText = getStringParamFromTemplateRow(this._row, "transcript_text", null);
     this.params.showInfoButton =
       !!this.params.infoIconAsset ||
+      !!this.params.transcriptText ||
       getBooleanParamFromTemplateRow(this._row, "show_info_button", false);
     this.params.rangeBarDisabled = getBooleanParamFromTemplateRow(
       this._row,
@@ -168,10 +191,6 @@ export class TmplAudioComponent
     this.isPlaying = !this.isPlaying;
   }
 
-  public async clickInfo() {
-    await this.triggerActions("info_click");
-  }
-
   /**
    * Handle dragging of the range bar. Does not seek within the actual audio file,
    * this should only be triggered when the handle is released (on ionChange)
@@ -235,7 +254,29 @@ export class TmplAudioComponent
     }
   }
 
-  ngOnDestroy() {
-    this.player.stop();
+  private async openTranscriptPopup() {
+    const modal = await this.modalCtrl.create({
+      component: TemplatePopupComponent,
+      componentProps: {
+        props: {
+          popupText: this.params.transcriptText,
+          fullscreen: false,
+          showCloseButton: true,
+        },
+      },
+      id: "popup-audio-transcript",
+      // update to this styling must be done in global theme scss as the modal is injected dynamically into the dom
+      cssClass: "template-popup-modal",
+      showBackdrop: false,
+    });
+    modal.present();
+  }
+
+  async ngOnDestroy() {
+    this.player?.stop();
+    const activeModal = await this.modalCtrl.getTop();
+    if (activeModal) {
+      await activeModal.dismiss();
+    }
   }
 }

src/app/shared/components/template/components/index.ts

@@ -55,7 +55,7 @@ import { TmplTaskCardComponent } from "./task-card/task-card.component";
 import { TmplTaskProgressBarComponent } from "./task-progress-bar/task-progress-bar.component";
 import { TmplTextAreaComponent } from "./text-area/text-area.component";
 import { TmplTextBoxComponent } from "./text-box/text-box.component";
-import { TmplTextComponent } from "./text";
+import { TmplTextComponent } from "./text/text.component";
 import { TmplTileComponent } from "./tile-component/tile-component.component";
 import { TmplTitleComponent } from "./title";
 import { TmplTimerComponent } from "./timer/timer.component";

src/app/shared/components/template/components/layout/popup/popup.component.html

@@ -8,14 +8,21 @@
       <ion-icon slot="icon-only" name="close"></ion-icon>
     </div>
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
-      <plh-template-container
-        class="template-container"
-        [name]="props.name"
-        [templatename]="props.templatename"
-        [parent]="props.parent"
-        [row]="props.row"
-        (emittedValue)="handleEmittedValue($event)"
-      ></plh-template-container>
+      @if (props.popupText) {
+        <!-- Use a text component row to display popup text -->
+        <plh-tmpl-text
+          [row]="{ _nested_name: '', name: '', type: 'text', value: props.popupText }"
+        ></plh-tmpl-text>
+      } @else {
+        <plh-template-container
+          class="template-container"
+          [name]="props.name"
+          [templatename]="props.templatename"
+          [parent]="props.parent"
+          [row]="props.row"
+          (emittedValue)="handleEmittedValue($event)"
+        ></plh-template-container>
+      }
     </div>
   </div>
 </div>

src/app/shared/components/template/components/layout/popup/popup.component.ts

@@ -53,4 +53,6 @@ export interface ITemplatePopupComponentProps extends ITemplateContainerProps {
   waitForDismiss?: boolean;
   /** Display fullscreen overlayed on top of all other app content */
   fullscreen?: boolean;
+  /** Pass text only to render that text in a popup, bypassing any templates */
+  popupText?: string;
 }