Tta 67 refactor tt UI secrets injection and ci cd pipelines

.github/workflows/CD-time-tracker-ui.yml

@@ -28,9 +28,11 @@ jobs:
 
     - name: Inject Secrets
       env:
+        AUTHORITY: ${{ secrets.authority }}
+        API_URL: ${{ secrets.api_url }}
         SCOPES: ${{ secrets.scopes }}
         CLIENT_ID: ${{ secrets.client_id }}
-        AUTHORITY: ${{ secrets.authority }}
+        CLIENT_URL: ${{ secrets.client_url }}
         STACK_EXCHANGE_ID: ${{ secrets.stack_exchange_id }}
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.stack_exchange_access_token }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.azure_app_configuration_connection_string }}
@@ -44,7 +46,7 @@ jobs:
         source .env
         set +a
         npm install
-        npm run build --prod --if-present
+        npm run build-legacy --if-present
         cp scripts/default-static-site.js ${BUILD_PATH}
 
     - name: 'Deploy to Azure Web App'

.github/workflows/CI-time-tracker-ui.yml

@@ -41,9 +41,11 @@ jobs:
 
     - name: Inject Secrets
       env:
+        AUTHORITY: ${{ secrets.AUTHORITY }}
+        API_URL : ${{ secrets.API_URL }}
         SCOPES: ${{ secrets.SCOPES }}
         CLIENT_ID: ${{ secrets.CLIENT_ID }}
-        AUTHORITY: ${{ secrets.AUTHORITY }}
+        CLIENT_URL : ${{ secrets.CLIENT_URL }}
         STACK_EXCHANGE_ID: ${{ secrets.STACK_EXCHANGE_ID }}
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}

.github/workflows/time-tracker-ui-cd-stage.yml

@@ -30,7 +30,16 @@ jobs:
         creds: ${{ secrets.AZURE_CREDENTIALS }}
 
     - name: Build the docker image
-      run: make build_prod
+      run: |-
+        docker build \
+          --target production  -t timetracker_ui \
+          --build-arg API_URL="${{secrets.API_URL_STAGE}}" \
+          --build-arg AUTHORITY="${{secrets.AUTHORITY}}" \
+          --build-arg CLIENT_ID="${{secrets.CLIENT_ID_STAGE}}" \
+          --build-arg CLIENT_URL="${{ secrets.CLIENT_URL_STAGE}}" \
+          --build-arg SCOPES="${{secrets.SCOPES}}" \
+          --build-arg AZURE_APP_CONFIGURATION_CONNECTION_STRING="${{secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING}}" \
+          .
 
     - name: Publish docker image to stage azure container registry
       run: |

.github/workflows/time-tracker-ui-ci.yml

@@ -32,11 +32,13 @@ jobs:
 
     - name: Inject Secrets
       env:
-        SCOPES: ${{ secrets.SCOPES }}
-        CLIENT_ID: ${{ secrets.CLIENT_ID }}
         AUTHORITY: ${{ secrets.AUTHORITY }}
-        STACK_EXCHANGE_ID: ${{ secrets.STACK_EXCHANGE_ID }}
-        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
+        API_URL: ${{ secrets.STAGE_API_URL}}
+        SCOPES: ${{ secrets.SCOPES }}
+        CLIENT_ID: ${{ secrets.STAGE_CLIENT_ID }}
+        CLIENT_URL: ${{ secrets.STAGE_CLIENT_URL }}
+        STACK_EXCHANGE_ID: ${{ secrets.STAGE_STACK_EXCHANGE_ID }}
+        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STAGE_STACK_EXCHANGE_ACCESS_TOKEN }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}
       run: |
         chmod +x ./scripts/populate-keys.sh

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14 AS development
+FROM node:14 AS building
 
 ENV USERNAME timetracker
 ENV HOME /home/${USERNAME}
@@ -12,21 +12,30 @@ USER ${USERNAME}
 RUN npm cache clean --force && npm install
 EXPOSE 4200
 EXPOSE 9876
-CMD ${HOME}/time-tracker-ui/node_modules/.bin/ng serve --host 0.0.0.0 --disableHostCheck
+ARG API_URL
+ARG AUTHORITY
+ARG CLIENT_ID
+ARG CLIENT_URL
+ARG SCOPES
+ARG AZURE_APP_CONFIGURATION_CONNECTION_STRING
+
+RUN API_URL=${API_URL} \
+    AUTHORITY=${AUTHORITY} \
+    CLIENT_ID=${CLIENT_ID} \
+    CLIENT_URL=${CLIENT_URL} \
+    SCOPES=${SCOPES} \
+    AZURE_APP_CONFIGURATION_CONNECTION_STRING=${AZURE_APP_CONFIGURATION_CONNECTION_STRING}
 
-
-
-FROM development as build
-COPY .env .
 RUN npm run build
 
+
 FROM nginx:1.21 AS production
 
 ENV USERNAME app
 RUN useradd -ms /bin/bash ${USERNAME}
 
 COPY nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /home/timetracker/time-tracker-ui/dist/time-tracker /usr/share/nginx/html
+COPY --from=building /home/timetracker/time-tracker-ui/dist/time-tracker /usr/share/nginx/html
 COPY .env /usr/share/nginx/html
 RUN chown -R ${USERNAME}:${USERNAME} /var/cache/nginx && \
     chown -R ${USERNAME}:${USERNAME} /var/log/nginx && \

Makefile

@@ -55,12 +55,20 @@ publish: require-acr-arg require-image_tag-arg ## Upload a docker image to the s
 	docker push $(acr).azurecr.io/timetracker_ui:$(image_tag)
 
 .PHONY: build_prod
-build_prod: ## Create docker image with dependencies needed for production.
-	docker build --target production -t timetracker_ui_prod -f Dockerfile .
+build_prod: ## Create docker image with dependencies needed for production -- to test locally only
+	docker build \
+		--target production  -t timetracker_ui_prod \
+		--build-arg API_URL="${API_URL}" \
+		--build-arg AUTHORITY="${AUTHORITY}" \
+		--build-arg CLIENT_ID="${CLIENT_ID}" \
+		--build-arg CLIENT_URL="${CLIENT_URL}" \
+		--build-arg SCOPES="${SCOPES}" \
+		--build-arg AZURE_APP_CONFIGURATION_CONNECTION_STRING="${AZURE_APP_CONFIGURATION_CONNECTION_STRING}" \
+		.
 
 .PHONY: run_prod
-run_prod: ## Execute timetracker_ui_prod docker container.
-	docker run -d -p 80:80 --env-file ./.env --name timetracker_ui_prod timetracker_ui_prod
+run_prod: ## Execute timetracker_ui_prod docker container -- to test locally only
+	docker run -d -p 80:80 --name timetracker_ui_prod timetracker_ui_prod
 
 .PHONY: stop_prod
 stop_prod: ## Stop container timetracker_ui_prod.

angular.json

@@ -78,6 +78,34 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "productionlegacy": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prodlegacy.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
             }
           }
         },

docker-compose.yml

@@ -11,14 +11,13 @@ services:
       - 9876:9876
     environment:
       AUTHORITY: ${AUTHORITY}
+      API_URL: ${API_URL}
       CLIENT_ID: ${CLIENT_ID}
+      CLIENT_URL: ${CLIENT_URL}
       SCOPES: ${SCOPES}
       STACK_EXCHANGE_ID: ${STACK_EXCHANGE_ID}
       STACK_EXCHANGE_ACCESS_TOKEN: ${STACK_EXCHANGE_ACCESS_TOKEN}
       AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${AZURE_APP_CONFIGURATION_CONNECTION_STRING}
-      AUTHORITY_JSON: ${AUTHORITY_JSON}
-      CLIENT_ID_JSON: ${CLIENT_ID_JSON}
-      SCOPES_JSON: ${SCOPES_JSON}
     volumes:
       - ./src:/home/timetracker/time-tracker-ui/src/
       - ./scripts:/home/timetracker/time-tracker-ui/scripts/
@@ -39,12 +38,11 @@ services:
       - 9876:9876
     environment:
       CHROME_BIN: /opt/google/chrome/google-chrome
+      API_URL: ${API_URL}
       AUTHORITY: ${AUTHORITY}
       CLIENT_ID: ${CLIENT_ID}
+      CLIENT_URL: ${CLIENT_URL}
       SCOPES: ${SCOPES}
       STACK_EXCHANGE_ID: ${STACK_EXCHANGE_ID}
       STACK_EXCHANGE_ACCESS_TOKEN: ${STACK_EXCHANGE_ACCESS_TOKEN}
       AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${AZURE_APP_CONFIGURATION_CONNECTION_STRING}
-      AUTHORITY_JSON: ${AUTHORITY_JSON}
-      CLIENT_ID_JSON: ${CLIENT_ID_JSON}
-      SCOPES_JSON: ${SCOPES_JSON}

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build --prod",
+    "build-legacy": "ng build --configuration productionlegacy",
     "test": "ng test --browsers ChromeHeadless",
     "test-headless": "ng test --browsers ChromeHeadless",
     "ci-test": "ng test --no-watch --no-progress --browsers ChromeHeadless",

scripts/populate-keys.sh

@@ -1,8 +1,11 @@
 #!/bin/bash
 
 > .env
+echo "API_URL='$API_URL'" >> .env
 echo "AUTHORITY='$AUTHORITY'" >> .env
+echo "API_URL='$API_URL'" >> .env
 echo "CLIENT_ID='$CLIENT_ID'" >> .env
+echo "CLIENT_URL='$CLIENT_URL'" >> .env
 echo "SCOPES='$SCOPES'" >> .env
 echo "STACK_EXCHANGE_ID='$STACK_EXCHANGE_ID'" >> .env
 echo "STACK_EXCHANGE_ACCESS_TOKEN='$STACK_EXCHANGE_ACCESS_TOKEN'" >> .env

src/app/app.module.ts

@@ -46,7 +46,8 @@ import { ProjectEffects } from './modules/customer-management/components/project
 import { TechnologyEffects } from './modules/shared/store/technology.effects';
 import { ProjectTypeEffects } from './modules/customer-management/components/projects-type/store/project-type.effects';
 import { reducers, metaReducers } from './reducers';
-import { environment } from '../environments/environment';
+import { CLIENT_URL, environment } from '../environments/environment';
+import { EnvironmentType } from '../environments/enum';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 // tslint:disable-next-line: max-line-length
 import { CustomerListComponent } from './modules/customer-management/components/customer-info/components/customer-list/customer-list.component';
@@ -168,7 +169,7 @@ const maskConfig: Partial<IConfig> = {
     StoreModule.forRoot(reducers, {
       metaReducers,
     }),
-    !environment.production
+    environment.production === EnvironmentType.TT_DEV
       ? StoreDevtoolsModule.instrument({
           maxAge: 15, // Retains last 15 states
         })
@@ -206,9 +207,7 @@ const maskConfig: Partial<IConfig> = {
         providers: [
           {
             id: GoogleLoginProvider.PROVIDER_ID,
-            provider: new GoogleLoginProvider(
-              '565556796659-hscrj9e6m2krc41cfng898793ocfnb8j.apps.googleusercontent.com'
-            )
+            provider: new GoogleLoginProvider(CLIENT_URL)
           }
         ]
       } as SocialAuthServiceConfig,

src/app/guards/login-guard/login.guard.ts

@@ -3,12 +3,14 @@ import { Router, CanActivate } from '@angular/router';
 import { AzureAdB2CService } from '../../modules/login/services/azure.ad.b2c.service';
 import { LoginService } from '../../modules/login/services/login.service';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
+
 
 @Injectable({
   providedIn: 'root',
 })
 export class LoginGuard implements CanActivate {
-  isProduction = environment.production;
+  isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
   constructor(
     private azureAdB2CService: AzureAdB2CService,
     private router: Router,

src/app/modules/activities-management/pages/activities-management.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
 
 @Component({
   selector: 'app-activities-management',
@@ -11,6 +12,6 @@ export class ActivitiesManagementComponent implements OnInit {
   showOptionInDevelopment = true;
 
   ngOnInit() {
-    this.showOptionInDevelopment = !environment.production;
+    this.showOptionInDevelopment = environment.production === EnvironmentType.TT_DEV;
   }
 }

src/app/modules/customer-management/components/projects/components/services/project.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { environment } from '../../../../../../../environments/environment';
+import { EnvironmentType } from '../../../../../../../environments/enum';
 import { Project } from '../../../../../shared/models';
 
 @Injectable({
@@ -10,7 +11,7 @@ import { Project } from '../../../../../shared/models';
 export class ProjectService {
   projects: Project[] = [];
   url = `${environment.timeTrackerApiUrl}/projects`;
-  isDevelopment = !environment.production;
+  isDevelopment = environment.production === EnvironmentType.TT_DEV;
 
   constructor(private http: HttpClient) {}
 

src/app/modules/home/home.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { LoadUser } from 'src/app/modules/user/store/user.actions';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
 import { AzureAdB2CService } from '../login/services/azure.ad.b2c.service';
 import { LoginService } from '../login/services/login.service';
 
@@ -11,7 +12,7 @@ import { LoginService } from '../login/services/login.service';
   styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent implements OnInit {
-  isProduction = environment.production;
+  isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
   constructor(
     private azureAdB2CService: AzureAdB2CService,
     private loginService: LoginService,

src/app/modules/login/login.component.ts

@@ -5,6 +5,7 @@ import { FeatureToggleCookiesService } from '../shared/feature-toggles/feature-t
 
 import { SocialAuthService, SocialUser } from 'angularx-social-login';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
 import { LoginService } from './services/login.service';
 @Component({
   selector: 'app-login',
@@ -13,7 +14,7 @@ import { LoginService } from './services/login.service';
 })
 export class LoginComponent implements OnInit {
   socialUser: SocialUser;
-  isProduction = environment.production;
+  isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
 
   constructor(
     private azureAdB2CService: AzureAdB2CService,

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -7,6 +7,8 @@ import { UserInfoService } from 'src/app/modules/user/services/user-info.service
 import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
 import { LoginService } from '../../../login/services/login.service';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
+
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
@@ -16,7 +18,7 @@ export class SidebarComponent implements OnInit, OnDestroy {
   itemsSidebar: ItemSidebar[] = [];
   navStart;
   sidebarItems$: Subscription;
-  isProduction = environment.production;
+  isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
 
   constructor(
     private router: Router,

src/app/modules/shared/components/user/user.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
 import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
 import { LoginService } from '../../../login/services/login.service';
 
@@ -11,7 +12,7 @@ import { LoginService } from '../../../login/services/login.service';
 export class UserComponent implements OnInit {
   userName: string;
   userEmail: string;
-  isProduction = environment.production;
+  isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
 
   constructor(private azureAdB2CService: AzureAdB2CService, private loginService: LoginService) {}
 

src/app/modules/shared/feature-toggles/filters/feature-filter-provider.service.ts

@@ -7,13 +7,15 @@ import { TargetingFilterParameters } from './targeting/targeting-feature-filter-
 import { TargetingFeatureFilterModel } from './targeting/targeting-feature-filter.model';
 import { LoginService } from '../../../login/services/login.service';
 import { environment } from 'src/environments/environment';
+import { EnvironmentType } from 'src/environments/enum';
+
 
 @Injectable({
   providedIn: 'root',
 })
 export class FeatureFilterProvider {
   constructor(private userService: AzureAdB2CService, private loginService: LoginService) {}
-  isProduction = environment.production;
+  isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
 
   getFilterFromConfiguration(featureFilterConfiguration: FeatureFilterConfiguration): FeatureFilterModel {
     const featureName = featureFilterConfiguration.name;