[NWSDE #6] Support customisation of TRE portal header and footer text

.github/actions/devcontainer_run_command/action.yml

@@ -133,6 +133,14 @@ inputs:
     description: "Application Gateway SKU"
     required: false
     default: ""
+  TRE_PRODUCT_NAME:
+    description: "Product name shown in top left corner of TRE portal"
+    required: false
+    default: "Azure TRE"
+  TRE_FOOTER_TEXT:
+    description: "Text shown in bottom left corner of TRE portal"
+    required: false
+    default: "Azure Trusted Research Environment"
 
 runs:
   using: composite
@@ -240,6 +248,8 @@ runs:
             && inputs.WORKSPACE_APP_SERVICE_PLAN_SKU) || 'P1v2' }}" \
           -e TF_VAR_rp_bundle_values='${{ (toJson(inputs.RP_BUNDLE_VALUES) != '""'
             && inputs.RP_BUNDLE_VALUES) || '{}' }}' \
+          -e TRE_PRODUCT_NAME="${{ inputs.TRE_PRODUCT_NAME }}" \
+          -e TRE_FOOTER_TEXT="${{ inputs.TRE_FOOTER_TEXT }}" \
           -e TF_VAR_resource_processor_number_processes_per_instance="${{ (inputs.RESOURCE_PROCESSOR_NUMBER_PROCESSES_PER_INSTANCE != ''
             && inputs.RESOURCE_PROCESSOR_NUMBER_PROCESSES_PER_INSTANCE) || 5 }}" \
           -e TF_VAR_firewall_sku=${{ inputs.FIREWALL_SKU }} \

.github/workflows/deploy_tre_reusable.yml

@@ -95,6 +95,12 @@ on:  # yamllint disable-line rule:truthy
       AZURE_CREDENTIALS:
         description: ""
         required: true
+      TRE_PRODUCT_NAME:
+        description: ""
+        required: false
+      TRE_FOOTER_TEXT:
+        description: ""
+        required: false
 
 # This will prevent multiple runs of this entire workflow.
 # We should NOT cancel in progress runs as that can destabilize the environment.
@@ -737,6 +743,8 @@ jobs:
           MGMT_RESOURCE_GROUP_NAME: ${{ secrets.MGMT_RESOURCE_GROUP_NAME }}
           MGMT_STORAGE_ACCOUNT_NAME: ${{ secrets.MGMT_STORAGE_ACCOUNT_NAME }}
           SWAGGER_UI_CLIENT_ID: "${{ secrets.SWAGGER_UI_CLIENT_ID }}"
+          TRE_PRODUCT_NAME: "${{ vars.TRE_PRODUCT_NAME }}"
+          TRE_FOOTER_TEXT: "${{ vars.TRE_FOOTER_TEXT }}"
 
   e2e_tests_smoke:
     name: "Run E2E Tests (Smoke)"

CHANGELOG.md

@@ -24,6 +24,7 @@ ENHANCEMENTS:
 * Add support for customer-managed keys encryption in base workspace ([#4161](https://github.com/microsoft/AzureTRE/pull/4161))
 * Add ability to download VSCode Extensions ([[#4187](https://github.com/microsoft/AzureTRE/issues/4187)])
 * Update Windows VM Images ([#4198](https://github.com/microsoft/AzureTRE/pull/4198))
+* Support customisation of TRE portal header and footer text (TBC)
 
 BUG FIXES:
 - Update KeyVault references in API to use the version so Terraform cascades the update ([#4112](https://github.com/microsoft/AzureTRE/pull/4112))

config.sample.yaml

@@ -73,6 +73,12 @@ resource_processor:
 # yamllint disable-line rule:line-length
 #  rp_bundle_values: '{"custom_key_1":"custom_value_1","image_gallery_id":"/subscriptions/<subscription-id>/resourceGroups/<your-rg>/providers/Microsoft.Compute/galleries/<your-gallery-name>"}'
 
+ui_config:
+  # Product name shown in the top left hand corner of the TRE portal
+  tre_product_name: Azure TRE
+  # Footer text shown in the bottom left hand corner of the TRE portal
+  tre_footer_text: Azure Trusted Research Environment
+
 developer_settings:
 # Locks will not be added to stateful resources so they can be easily removed
 # stateful_resources_locked: false

config_schema.json

@@ -165,6 +165,20 @@
       "required": [
         "aad_tenant_id"
       ]
+    },
+    "ui_config": {
+      "description": "UI customisation",
+      "type": "object",
+      "properties": {
+        "tre_product_name": {
+          "description": "Product name shown in top left corner of portal. Default value is 'Azure TRE'",
+          "type": "string"
+        },
+        "footer_text": {
+          "description": "Text shown in bottom left corner of portal. Default value is 'Azure Trusted Research Environment'",
+          "type": "string"
+        }
+      }
     }
   },
   "required": [

devops/scripts/build_deploy_ui.sh

@@ -20,7 +20,9 @@ jq --arg rootClientId "${SWAGGER_UI_CLIENT_ID}" \
   --arg treId "${TRE_ID}" \
   --arg version "${ui_version}" \
   --arg activeDirectoryUri "${activeDirectoryUri}" \
-  '.rootClientId = $rootClientId | .rootTenantId = $rootTenantId | .treApplicationId = $treApplicationId | .treUrl = $treUrl | .treId = $treId | .version = $version | .activeDirectoryUri = $activeDirectoryUri' ./src/config.source.json > ./src/config.json
+  --arg treProductName "${TRE_PRODUCT_NAME}" \
+  --arg treFooterText "${TRE_FOOTER_TEXT}" \
+  '.rootClientId = $rootClientId | .rootTenantId = $rootTenantId | .treApplicationId = $treApplicationId | .treUrl = $treUrl | .treId = $treId | .version = $version | .activeDirectoryUri = $activeDirectoryUri | .treProductName = $treProductName | .treFooterText = $treFooterText' ./src/config.source.json > ./src/config.json
 
 # build and deploy the app
 yarn install

devops/scripts/load_and_validate_env.sh

@@ -64,10 +64,15 @@ else
     TF_KEYS="with_entries(.key |= \"TF_VAR_\" + .)"
     # Yq query to format the output to be in form: key=value
     FORMAT_FOR_ENV_EXPORT="to_entries| map(.key + \"=\" +  .value)|join(\" \")"
+    FORMAT_FOR_ENV_EXPORT_NEWLINE="to_entries| map(.key + \"=\" +  .value)|join(\"\n\")"
 
     # Export as UPPERCASE keys env vars
-    # shellcheck disable=SC2046
-    export $(yq e "$GET_LEAF_KEYS|$UPCASE_KEYS| $FORMAT_FOR_ENV_EXPORT" config.yaml)
+    # (process line by line to preserve values with spaces in)
+    while IFS= read -r KV; do
+      # shellcheck disable=SC2163
+      export "$KV"
+    done <<< "$(yq e "$GET_LEAF_KEYS|$UPCASE_KEYS| $FORMAT_FOR_ENV_EXPORT_NEWLINE" config.yaml)"
+
     # Export as Terraform keys env vars
     # shellcheck disable=SC2046
     export $(yq e "$GET_LEAF_KEYS|$TF_KEYS| $FORMAT_FOR_ENV_EXPORT" config.yaml)

ui/app/src/components/shared/Footer.tsx

@@ -32,7 +32,7 @@ export const Footer: React.FunctionComponent = () => {
   return (
     <div className={contentClass}>
       <Stack horizontal style={{alignItems:'center'}}>
-        <StackItem grow={1}>Azure Trusted Research Environment</StackItem>
+        <StackItem grow={1}>{ (config.treFooterText ?? "") === ""  ? "Azure Trusted Research Environment" : config.treFooterText }</StackItem>
         <StackItem>
           <IconButton
             styles={iconButtonStyles}

ui/app/src/components/shared/TopNav.tsx

@@ -3,6 +3,7 @@ import { getTheme, Icon, mergeStyles, Stack } from '@fluentui/react';
 import { Link } from 'react-router-dom';
 import { UserMenu } from './UserMenu';
 import { NotificationPanel } from './notifications/NotificationPanel';
+import config from '../../config.json';
 
 export const TopNav: React.FunctionComponent = () => {
   return (
@@ -12,7 +13,7 @@ export const TopNav: React.FunctionComponent = () => {
           <Stack.Item grow={100}>
             <Link to='/' className='tre-home-link'>
               <Icon iconName="TestBeakerSolid" style={{ marginLeft: '10px', marginRight: '10px', verticalAlign: 'middle' }} />
-              <h5 style={{display: 'inline'}}>Azure TRE</h5>
+              <h5 style={{display: 'inline'}}>{ (config.treProductName ?? "") === ""  ? "Azure TRE" : config.treProductName}</h5>
             </Link>
           </Stack.Item>
           <Stack.Item>

ui/app/src/config.source.json

@@ -7,5 +7,7 @@
     "treId": "my-tre",
     "debug": false,
     "version": "0.0.0",
-    "activeDirectoryUri": ""
+    "activeDirectoryUri": "",
+    "treProductName": "Azure TRE",
+    "treFooterText": "Azure Trusted Research Environment"
 }