Dev tools batch of fixes

angular.json

@@ -179,6 +179,38 @@
                 }
               ]
             },
+            "local-with-proxy-localize-en": {
+              "localize": ["en"],
+              "optimization": false,
+              "outputHashing": "none",
+              "sourceMap": true,
+              "namedChunks": true,
+              "extractLicenses": false,
+              "vendorChunk": true,
+              "buildOptimizer": false,
+              "outputPath": "dist",
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local-with-proxy.ts"
+                }
+              ]
+            },
+            "local-with-proxy-localize-fr": {
+              "localize": ["fr"],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local-with-proxy.ts"
+                }
+              ]
+            },
             "production": {
               "budgets": [
                 {
@@ -302,6 +334,14 @@
               "browserTarget": "ng-orcid:build:local-with-proxy",
               "proxyConfig": "src/proxy.conf.qa.mjs"
             },
+            "local-qa-en": {
+              "browserTarget": "ng-orcid:build:local-with-proxy-localize-en",
+              "proxyConfig": "src/proxy.conf.qa.mjs"
+            },
+            "local-qa-fr": {
+              "browserTarget": "ng-orcid:build:local-with-proxy-localize-fr",
+              "proxyConfig": "src/proxy.conf.qa.mjs"
+            },
             "local-sandbox": {
               "browserTarget": "ng-orcid:build:local-with-proxy",
               "proxyConfig": "src/proxy.conf.sandbox..mjs"

package.json

@@ -5,24 +5,8 @@
     "start-local": "ng serve --disable-host-check --host 0.0.0.0",
     "start": "ng serve --configuration=local-qa --host 0.0.0.0",
     "start-sandbox": "ng serve --configuration=local-sandbox --host 0.0.0.0",
-    "start:en": "ng serve --configuration=local,en --disable-host-check",
-    "start:fr": "ng serve --configuration=local,fr --disable-host-check",
-    "start:ar": "ng serve --configuration=local,ar --disable-host-check",
-    "start:ca": "ng serve --configuration=local,ca --disable-host-check",
-    "start:cs": "ng serve --configuration=local,cs --disable-host-check",
-    "start:es": "ng serve --configuration=local,es --disable-host-check",
-    "start:it": "ng serve --configuration=local,it --disable-host-check",
-    "start:ja": "ng serve --configuration=local,ja --disable-host-check",
-    "start:ko": "ng serve --configuration=local,ko --disable-host-check",
-    "start:lr": "ng serve --configuration=local,lr --disable-host-check",
-    "start:pt": "ng serve --configuration=local,pt --disable-host-check",
-    "start:rl": "ng serve --configuration=local,rl --disable-host-check",
-    "start:ru": "ng serve --configuration=local,ru --disable-host-check",
-    "start:uk": "ng serve --configuration=local,uk --disable-host-check",
-    "start:xx": "ng serve --configuration=local,xx --disable-host-check",
-    "start:zh_CN": "ng serve --configuration=local,zh-CN --disable-host-check",
-    "start:source": "ng serve --configuration=local,src --disable-host-check",
-    "start:zh_TW": "ng serve --configuration=local,zh-TW --disable-host-check",
+    "start:en": "ng serve --configuration=local-qa-en --disable-host-check",
+    "start:fr": "ng serve --configuration=local-qa-fr --disable-host-check",
     "test": "ng test",
     "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
     "lint": "echo 'temporally disable Angular linter to until eslint update'",

src/app/constants.ts

@@ -125,6 +125,7 @@ export const ApplicationRoutesLabels = {
   [ApplicationRoutes.trustedParties]: $localize`:@@share.trustedParties:Trusted parties - ORCID `,
   [ApplicationRoutes.resetPasswordEmail]: $localize`:@@share.resetPasswordEmail:Reset password - ORCID`,
   [ApplicationRoutes.selfService]: $localize`:@@share.selfService:Self Service - ORCID`,
+  [ApplicationRoutes.developerTools]: $localize`:@@share.selfService:Developer tools - ORCID`,
 }
 
 export const ApplicationDynamicRoutesLabels = {

src/app/developer-tools/components/client-secret-modal/client-secret-modal.component.html

@@ -20,6 +20,7 @@
       color="primary"
       i18n="@@shared.cancel"
       id="cancel-websites-button"
+      (click)="close()"
     >
       Cancel
     </button>

src/app/developer-tools/components/client-secret-modal/client-secret-modal.component.ts

@@ -23,4 +23,7 @@ export class ClientSecretModalComponent implements OnInit {
   ngOnInit(): void {
     this.secret = this.data.secretId
   }
+  close() {
+    this.matDialogRef.close()
+  }
 }

src/app/developer-tools/components/code-panel/code-panel.component.html

@@ -5,10 +5,16 @@
       (click)="swapOpenState()"
       *ngIf="!openState"
       class="expand_more"
+      [attr.aria-label]="expandAriaLabel + ' ' + title"
     >
       <mat-icon>expand_less</mat-icon>
     </button>
-    <button mat-icon-button (click)="swapOpenState()" *ngIf="openState">
+    <button
+      [attr.aria-label]="collapseAriaLabel + ' ' + title"
+      mat-icon-button
+      (click)="swapOpenState()"
+      *ngIf="openState"
+    >
       <mat-icon>expand_more</mat-icon>
     </button>
 

src/app/developer-tools/components/code-panel/code-panel.component.ts

@@ -9,6 +9,9 @@ import { Component, Input, OnInit } from '@angular/core'
   ],
 })
 export class CodePanelComponent implements OnInit {
+  collapseAriaLabel = $localize`:@@developerTools.collapse:Collapse`
+  expandAriaLabel = $localize`:@@developerTools.expand:Expand`
+
   openState = false
   @Input() title: string
   constructor() {}

src/app/developer-tools/components/terms-of-use/terms-of-use.component.html

@@ -1,6 +1,3 @@
-<h1 class="orc-font-heading-small" i18n="@@developerTools.developerTools">
-  Developer tools
-</h1>
 <p i18n="@@developerTools.thisSectionIsIntended">
   This section is intended for developers who plan to integrate ORCID into their
   system using the ORCID Public API.
@@ -34,19 +31,18 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.gettingStarted">
 </ul>
 
 <p>
-  <ng-container i18n="@@developerTools.orcidApiResful">
-    The ORCID API is RESTful and uses
-  </ng-container>
+  <ng-container i18n="@@developerTools.orcidApiResful"
+    >The ORCID API is RESTful and uses</ng-container
+  >
   <a
     href="https://oauth.net/2/"
     rel="noopener noreferrer"
     target="_blank"
     class="underline"
     i18n="@@developerTools.oauth20"
     >OAuth 2.0</a
-  >
-  <ng-container i18n="@@developerTools.wellEstablishedStandard">
-    , a well-established, standard protocol for user-based
+  ><ng-container i18n="@@developerTools.wellEstablishedStandard"
+    >, a well-established, standard protocol for user-based
     permissions.</ng-container
   >
 </p>

src/app/developer-tools/components/terms-of-use/terms-of-use.component.ts

@@ -18,6 +18,7 @@ import { RecordService } from 'src/app/core/record/record.service'
     './terms-of-use.component.scss',
     './terms-of-use.component.scss-theme.scss',
   ],
+  preserveWhitespaces: true,
 })
 export class TermsOfUseComponent implements OnInit, OnDestroy {
   checked
@@ -28,7 +29,6 @@ export class TermsOfUseComponent implements OnInit, OnDestroy {
 
   constructor(
     private developerToolsService: DeveloperToolsService,
-    private _platform: PlatformInfoService,
     private _record: RecordService
   ) {}
   ngOnDestroy(): void {