Merge branch 'develop' into 151-the-remove-bulk-domain-deployment-option-does-not-work

.gitlab-ci.yml

+stages:
+  - test
+  - sonar
+  - build
+
+test:
+  stage: test
+  image: trion/ng-cli-karma:15.2.10
+  script:
+    - npm ci --force
+    - ng build
+    - ng test --code-coverage --watch=false --browsers=Chrome
+  coverage: '/Lines.*?(\d+(?:\.\d+)?)%/'
+  artifacts:
+    paths:
+      - coverage/
+
+sonar:
+  stage: sonar
+  image: trion/ng-cli:15.2.10
+  only:
+    - develop
+  script:
+    - npm ci --force
+    - npm run sonar -- -Dsonar.host.url=${SONAR_HOST} -Dsonar.projectKey=${SONAR_PROJECT_KEY} -Dsonar.projectName=${SONAR_PROJECT_NAME} -Dsonar.branch.name=develop -Dsonar.login=${SONAR_LOGIN_TOKEN}
+
+build_and_push_latest_image:
+  stage: build
+  image: korvoj/docker-git:26.1.3
+  only:
+    - develop
+  variables:
+    IMAGE_TAG: "latest"
+  script:
+    - |
+      docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD $DOCKER_REPOSITORY
+      docker build -t $DOCKER_REPOSITORY_LOCAL:$IMAGE_TAG .
+      docker push $DOCKER_REPOSITORY_LOCAL:$IMAGE_TAG
+      docker logout $DOCKER_REPOSITORY
+
+build_and_push_release_image:
+  stage: build
+  image: korvoj/docker-git:26.1.3
+  only:
+    - tags
+  script:
+    - |
+      export IMAGE_TAG=$(echo $CI_COMMIT_TAG | cut -c 2-)
+      docker image prune -f
+      docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD $DOCKER_REPOSITORY
+      docker build -t $DOCKER_REPOSITORY_LOCAL:$IMAGE_TAG .
+      docker push $DOCKER_REPOSITORY_LOCAL:$IMAGE_TAG
+      docker logout $DOCKER_REPOSITORY
\ No newline at end of file

README.md

@@ -3,7 +3,7 @@
     <img src="docs/nmaas-logo-blue.png" alt="Logo" width="206" height="48">
   </a>
 
-  <h3 align="center">NMaaS Platform (Front-end)</h3>
+  <h3 align="center">nmaas Platform (Front-end)</h3>
 
   <h4 align="center">Open-source multi-tenant platform for effortless, orchestrated deployment of software tools and applications on top of Kubernetes</h4>
 
@@ -17,18 +17,18 @@
   </p>
 </div>
 
-## NMaaS Portal Component
+## nmaas Portal Component
 
-[NMaaS Portal](https://github.com/nmaas-platform/nmaas-portal) represents the front-end application of NMaaS that consumes the REST API offered by NMaaS Platform. NMaaS Portal is a Angular based application that is run in user's browser.
+[nmaas Portal](https://github.com/nmaas-platform/nmaas-portal) represents the front-end application of nmaas that consumes the REST API offered by nmaas Platform. nmaas Portal is an Angular-based application run in user's browser.
 
-### NMaaS Portal Development
+### nmaas Portal Development
 
-Explore the NMaaS Portal [development and deployment](docs/DEVELOPMENT.md) documentation.
+Explore the nmaas Portal [development and deployment](docs/DEVELOPMENT.md) documentation.
 
 ## Get in Touch
 
-Interested users can use the following mailing lists to subscribe to news about NMaaS, get in touch with the NMaaS development team, or other NMaaS users:
+Interested users can use the following mailing lists to subscribe to news about nmaas, get in touch with the nmaas development team, or other nmaas users:
 
-- [nmaas-announce@lists.geant.org](mailto:nmaas-announce@lists.geant.org) - public mailing list for announcements shared by the NMaaS team with the community ([subscribe here](https://lists.geant.org/sympa/info/nmaas-announce))
-- [nmaas@lists.geant.org](mailto:nmaas@lists.geant.org) - private mailing list for contacting the NMaaS core team members
-- [nmaas-users@lists.geant.org](mailto:nmaas-users@lists.geant.org) - public mailing lists for discussions related to NMaaS usage and development ([subscribe here](https://lists.geant.org/sympa/info/nmaas-users))
+- [nmaas-announce@lists.geant.org](mailto:nmaas-announce@lists.geant.org) - public mailing list for announcements shared by the nmaas team with the community ([subscribe here](https://lists.geant.org/sympa/info/nmaas-announce))
+- [nmaas@lists.geant.org](mailto:nmaas@lists.geant.org) - private mailing list for contacting the nmaas core team members
+- [nmaas-users@lists.geant.org](mailto:nmaas-users@lists.geant.org) - public mailing lists for discussions related to the nmaas usage and development ([subscribe here](https://lists.geant.org/sympa/info/nmaas-users))

angular.json

@@ -88,11 +88,16 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "karmaConfig": "./karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
             "codeCoverage": true,
+            "codeCoverageExclude": [
+              "src/app/test/**"
+            ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js"

build.gradle

@@ -5,7 +5,7 @@ plugins {
 	id "org.sonarqube" version "3.2.0"
 }
 
-version = '1.6.0'
+version = '1.6.3'
 
 task buildGUI(type: Exec) {
 	println 'Building using Angular CLI'

build_and_publish.sh

-#!/bin/bash
-
-TAG=1.6.0
-PACKAGE=nmaas-portal
-REPOSITORY=artifactory.geant.net/nmaas-docker-local
-sudo docker build --rm -t $REPOSITORY/$PACKAGE:$TAG -f ./Dockerfile ..
-sudo docker push $REPOSITORY/$PACKAGE:$TAG

docker/config.template.json

@@ -9,5 +9,6 @@
 	},
 	"captchaKey": "${CAPTCHA_KEY}",
     "showGitInfo": true,
-    "showChangelog": true
+    "showChangelog": true,
+	"landing" :"${LANDING_PAGE}"
 }

docs/DEVELOPMENT.md

-# NMaaS Portal (GUI)
+# nmaas Portal (GUI)
 
 ### Technologies
 ---
@@ -19,17 +19,17 @@ See `package.json` for detailed package list.
 + (running on server) Build project using `ng build` and deploy using http server of your choice
 + (running tests) Chrome is required for running tests, however `karma-chrome-launcher` should download Chrome automatically if it is not detected. Run test using `npm test` or `npm test-headless`. See `package.json` for detailed test commands.
 
-### Running NMaaS Portal locally
+### Running nmaas Portal locally
 ---
 Go to`nmaas-portal` directory in terminal or command line
 Run command `npm start` or `ng serve`
 After successful compilation go to `http://localhost:4200` in your browser (do not close terminal or command line)
-Note: First run requires entering `npm install` command in order to install all of missing dependencies (use `--force` or `--legacy-peer-deps` due to angular-formio)
+Note: First run requires entering `npm install` command to install all of the missing dependencies (use `--force` or `--legacy-peer-deps` due to angular-formio)
 
-### Running NMaaS Portal on dedicated machine
+### Running nmaas Portal on dedicated machine
 ---
-In order to run NMaaS Portal on dedicated machine perform the following steps:
-+ Build the NMaaS Portal by running `gradlew clean build` in the reactor directory.
+To run the nmaas Portal on a dedicated machine, perform the following steps:
++ Build the nmaas Portal by running `gradlew clean build` in the reactor directory.
   - In order to build for production environment use additional option `--configuration production`
 + The output archive `nmaas-portal-x.x.x.zip` file is created in `nmaas-portal/build/distributions` directory.
 + Run the http server in `nmaas-portal/build/app`
@@ -43,7 +43,7 @@ More information about code quality (including code coverage, test status) are a
 
 ### Default settings
 ---
-NMaaS Portal and Platform URLs:
+nmaas Portal and Platform URLs:
 + Portal: `http://<HOSTNAME>:9009`
 + Platform API: `http://<HOSTNAME>:9001/api`
 
@@ -51,9 +51,9 @@ Admin user:
 + username: `admin`
 + password: `admin`
 
-### Building and uploading NMaaS Portal Docker image
+### Building and uploading nmaas Portal Docker image
 ---
-In order to build the NMaaS Portal Docker image first alter the `build_and_publish.sh` script with custom REPOSITORY, PACKAGE and TAG values and execute `build_and_publish.sh` to automatically build and publish `nmaas-portal` image to selected Docker repository.
+To build the nmaas Portal Docker image first alter the `build_and_publish.sh` script with custom REPOSITORY, PACKAGE and TAG values and execute `build_and_publish.sh` to automatically build and publish `nmaas-portal` image to selected Docker repository.
 
 ### Issues
 ---

karma.conf.js

@@ -33,7 +33,9 @@ module.exports = function (config) {
                 'text/x-typescript': ['ts', 'tsx']
             },
             coverageReporter: {
-                dir: 'coverage',
+                dir: require('path').join(__dirname, 'coverage'),
+                subdir: '.',
+                exclude: ['**/*.spec.ts'],
                 reporters: [
                     {type: 'html', subdir: '.'},
                     {type: 'lcovonly', subdir: '.', file: 'lcov.info'},
@@ -48,13 +50,14 @@ module.exports = function (config) {
                 }
             },
 
-            reporters: ['progress'],
+            reporters: ['progress', 'kjhtml'],
             port: 9876,
             colors: true,
             logLevel: config.LOG_WARN,
             autoWatch: false,
             browsers: ['Chrome', 'ChromeHeadless', "Chromium"],
-            singleRun: true
+            singleRun: true,
+            restartOnFileChange: false
         }
     );
 };

package.json

 {
   "name": "nmaas-portal",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "license": "Apache 2.0",
   "angular-cli": {},
   "scripts": {
@@ -9,41 +9,44 @@
     "test": "ng test",
     "test-headless": "ng test --watch=false --code-coverage --browsers=ChromeHeadless --source-map=false",
     "pree2e": "webdriver-manager update --standalone false --gecko false",
-    "e2e": "protractor"
+    "e2e": "protractor",
+    "sonar": "sonar-scanner"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.3.0",
-    "@angular/cdk": "^14.2.7",
-    "@angular/common": "14.3.0",
-    "@angular/compiler": "14.3.0",
-    "@angular/core": "14.3.0",
-    "@angular/elements": "^14.3.0",
-    "@angular/forms": "14.3.0",
-    "@angular/platform-browser": "14.3.0",
-    "@angular/platform-browser-dynamic": "14.3.0",
-    "@angular/router": "14.3.0",
-    "@auth0/angular-jwt": "^5.0.2",
-    "@formio/angular": "^5.4.0-rc.2",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
+    "@angular/animations": "15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "15.2.10",
+    "@angular/compiler": "15.2.10",
+    "@angular/core": "15.2.10",
+    "@angular/elements": "^15.2.10",
+    "@angular/forms": "15.2.10",
+    "@angular/platform-browser": "15.2.10",
+    "@angular/platform-browser-dynamic": "15.2.10",
+    "@angular/router": "15.2.10",
+    "@auth0/angular-jwt": "^5.2.0",
+    "@formio/angular": "^5.5.0-rc.2",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "@types/semver": "^7.3.8",
     "@types/zxcvbn": "^4.4.1",
+    "@zxcvbn-ts/core": "^3.0.0",
+    "@zxcvbn-ts/language-en": "^3.0.0",
     "ajv": "^6.12.6",
-    "angular-password-strength-meter": "3.0.1",
+    "angular-password-strength-meter": "^8.0.0",
     "bootstrap": "^3.4.1",
     "document-register-element": "^1.14.10",
-    "formiojs": "^4.13.1",
+    "formiojs": "^4.14.10",
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "ng-event-source": "^1.0.14",
-    "ng-recaptcha": "^7.0.2",
+    "ng-recaptcha": "^11.0.0",
     "ng-terminal": "^3.1.0",
-    "ngx-pagination": "^5.1.0",
+    "ngx-pagination": "^6.0.3",
     "ngx-webstorage-service": "^4.1.0",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primeng": "^14.2.3",
+    "primeng": "^15.4.1",
     "rxjs": "^6.6.7",
     "semver": "^7.5.4",
     "tslib": "^2.0.0",
@@ -52,9 +55,9 @@
     "zxcvbn3": "^0.1.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.12",
-    "@angular/cli": "^14.2.12",
-    "@angular/compiler-cli": "^14.3.0",
+    "@angular-devkit/build-angular": "^15.2.11",
+    "@angular/cli": "^15.2.11",
+    "@angular/compiler-cli": "^15.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.20.13",
     "codelyzer": "^6.0.0",
@@ -70,9 +73,10 @@
     "karma-webpack": "^4.0.2",
     "protractor": "~7.0.0",
     "puppeteer": "^1.20.0",
+    "sonarqube-scanner": "^3.4.0",
     "ts-node": "^4.1.0",
     "tslint": "~6.1.0",
-    "typescript": "4.6.4",
+    "typescript": "4.9.5",
     "webpack": "^4.46.0"
   }
 }

src/app/app.module.ts

 import {BrowserModule} from '@angular/platform-browser';
-import {APP_INITIALIZER, NgModule} from '@angular/core';
+import {APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 import {JWT_OPTIONS, JwtModule} from '@auth0/angular-jwt';
@@ -99,7 +99,11 @@ export const jwtOptionsFactory = (appConfig: AppConfigService) => ({
     exports: [
         TranslateModule
     ],
-    bootstrap: [AppComponent]
+    bootstrap: [AppComponent],
+    schemas: [
+        CUSTOM_ELEMENTS_SCHEMA,
+        NO_ERRORS_SCHEMA
+    ]
 })
 export class AppModule {
 }

src/app/appmarket/admin/configuration/details/configurationdetails.component.html

@@ -5,8 +5,8 @@
             <form (submit)="save()" class="form-horizontal" #configurationForm="ngForm" *ngIf="this.configuration">
                 <div class="form-group">
                     <label for="setMaintenance"
-                           class="col-sm-2 control-label">{{ 'PORTAL_CONFIGURATION.MAINTENANCE' | translate }}</label>
-                    <div class="col-sm-10 pd-top-7">
+                           class="col-sm-3 control-label">{{ 'PORTAL_CONFIGURATION.MAINTENANCE' | translate }}</label>
+                    <div class="col-sm-9 pd-top-7">
                         <input type="checkbox" id="setMaintenance" name="setMaintenance"
                                [(ngModel)]="this.configuration.maintenance"
                                [checked]="this.configuration.maintenance === true">
@@ -14,8 +14,8 @@
                 </div>
                 <div class="form-group">
                     <label for="SSOLoginAllowed"
-                           class="col-sm-2 control-label">{{ 'PORTAL_CONFIGURATION.ALLOW_SSO_LOGIN' | translate }}</label>
-                    <div class="col-sm-10 pd-top-7">
+                           class="col-sm-3 control-label">{{ 'PORTAL_CONFIGURATION.ALLOW_SSO_LOGIN' | translate }}</label>
+                    <div class="col-sm-9 pd-top-7">
                         <input type="checkbox" id="SSOLoginAllowed" name="SSOLoginAllowed"
                                [(ngModel)]="this.configuration.ssoLoginAllowed"
                                [checked]="this.configuration.ssoLoginAllowed === true">
@@ -23,7 +23,7 @@
                 </div>
                 <div class="form-group">
                     <label for="defaultLang"
-                           class="col-sm-2 control-label">{{'PORTAL_CONFIGURATION.DEFAULT_LANGUAGE' | translate}}</label>
+                           class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.DEFAULT_LANGUAGE' | translate}}</label>
                     <div class="col-sm-3">
                         <select id="defaultLang" #langSelect class="form-control"
                                 (change)="this.configuration.defaultLanguage = langSelect.value">
@@ -34,8 +34,8 @@
                 </div>
                 <div class="form-group">
                     <label for="testInstance"
-                           class="col-sm-2 control-label">{{ 'PORTAL_CONFIGURATION.TEST_INSTANCE' | translate }}</label>
-                    <div class="col-sm-10 pd-top-7">
+                           class="col-sm-3 control-label">{{ 'PORTAL_CONFIGURATION.TEST_INSTANCE' | translate }}</label>
+                    <div class="col-sm-9 pd-top-7">
                         <input type="checkbox" id="testInstance" name="testInstance"
                                [(ngModel)]="this.configuration.testInstance"
                                [checked]="this.configuration.testInstance === true">
@@ -43,29 +43,22 @@
                 </div>
                 <div class="form-group">
                     <label for="sendAppInstanceFailureEmails"
-                           class="col-sm-2 control-label">{{ 'PORTAL_CONFIGURATION.SEND_APP_INSTANCE_FAILURE_EMAILS' | translate }}</label>
-                    <div class="col-sm-10 pd-top-7">
+                           class="col-sm-3 control-label">{{ 'PORTAL_CONFIGURATION.SEND_APP_INSTANCE_FAILURE_EMAILS' | translate }}</label>
+                    <div class="col-sm-9 pd-top-7">
                         <input type="checkbox" id="sendAppInstanceFailureEmails" name="sendAppInstanceFailureEmails"
                                [(ngModel)]="this.configuration.sendAppInstanceFailureEmails">
                     </div>
                 </div>
-                <div class="form-group">
-                    <label for="registrationDomainSelectionEnabled"
-                           class="col-sm-2 control-label">{{ 'PORTAL_CONFIGURATION.DOMAIN_SELECTION_ENABLED' | translate }}</label>
-                    <div class="col-sm-10 pd-top-7">
-                        <input type="checkbox" id="registrationDomainSelectionEnabled" name="registrationDomainSelectionEnabled"
-                               [(ngModel)]="this.configuration.registrationDomainSelectionEnabled">
-                    </div>
-                </div>
+
                 <div class="form-group">
 
-                <span class="control-label col-sm-2">
+                    <span class="control-label col-sm-3">
                      <strong>
                             {{ 'PORTAL_CONFIGURATION.SEND_APP_INSTANCE_FAILURE_EMAILS_LIST' | translate }}
                      </strong>
                     </span>
 
-                    <div class="col-sm-10 display-emails">
+                    <div class="col-sm-9 display-emails">
                         <div *ngFor="let email of configuration.appInstanceFailureEmailList; let i=index; trackBy:trackByFn"
                              class="col-lg-6 col-md-10 col-sm-12 pd-bottom-5 row email-row">
                             <div class="email-input">
@@ -75,20 +68,50 @@
                                        [(ngModel)]="configuration.appInstanceFailureEmailList[i]"/>
                             </div>
 
-                            <button role="button" type="button" class="btn btn-default" (click)="removeEmailEntry(email)">
+                            <button role="button" type="button" class="btn btn-danger" (click)="removeEmailEntry(email)">
                                 Remove
                             </button>
                         </div>
                         <div class="pd-left-15">
-                            <button role="button" type="button" class="btn btn-success" (click)="addEmailEntry()">Add
+                            <button role="button" type="button" class="btn btn-secondary" (click)="addEmailEntry()">Add
                             </button>
                         </div>
                     </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="registrationDomainSelectionEnabled"
+                           class="col-sm-3 control-label">{{ 'PORTAL_CONFIGURATION.DOMAIN_SELECTION_ENABLED' | translate }}</label>
+                    <div class="col-sm-9 pd-top-7">
+                        <input type="checkbox" id="registrationDomainSelectionEnabled" name="registrationDomainSelectionEnabled"
+                               [(ngModel)]="this.configuration.registrationDomainSelectionEnabled">
+                    </div>
+                </div>
 
+                <div class="form-group">
+                    <label for="bulkDomainsAllowForSsoAccounts"
+                           class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DOMAINS_ALLOW_FOR_SSO_ACCOUNTS' | translate}}</label>
+                    <div class="col-sm-9 pd-top-7">
+                        <input type="checkbox" id="bulkDomainsAllowForSsoAccounts" name="bulkDomainsAllowForSsoAccounts"
+                               [(ngModel)]="this.configuration.bulkDomainsAllowForSsoAccounts"
+                               [checked]="this.configuration.bulkDomainsAllowForSsoAccounts === true">
+                    </div>
+                </div>
 
+                <div class="form-group">
+                    <label for="bulkDomainsSendEmailForNewAccounts"
+                           class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DOMAINS_SEND_EMAIL_FOR_NEW_ACCOUNTS' | translate}}</label>
+                    <div class="col-sm-9 pd-top-7">
+                        <input type="checkbox" id="bulkDomainsSendEmailForNewAccounts" name="bulkDomainsSendEmailForNewAccounts"
+                               [(ngModel)]="this.configuration.bulkDomainsSendEmailForNewAccounts"
+                               [checked]="this.configuration.bulkDomainsSendEmailForNewAccounts === true">
+                    </div>
                 </div>
+                <div class="flex justify-content-end">
                     <button class="btn btn-primary"
                             type="submit">{{ 'PORTAL_CONFIGURATION.SUBMIT_BUTTON' | translate }}</button>
+                </div>
+
                 <div class="alert alert-danger" style="margin-top: 5px" *ngIf="errorMsg">
                     {{errorMsg}}
                 </div>

src/app/appmarket/admin/configuration/details/configurationdetails.component.spec.ts

@@ -8,6 +8,7 @@ import {of} from 'rxjs';
 import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {InternationalizationService} from '../../../../service/internationalization.service';
 import createSpyObj = jasmine.createSpyObj;
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 describe('ConfigurationDetailsComponent', () => {
     let component: ConfigurationDetailsComponent;
@@ -38,6 +39,7 @@ describe('ConfigurationDetailsComponent', () => {
                 {provide: ConfigurationService, useValue: configurationServiceSpy},
                 {provide: InternationalizationService, useValue: internationalizationSpy}
             ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA],
         })
             .compileComponents();
     }));

src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.html

@@ -40,18 +40,22 @@
                 </ng-template>
                 <tr>
                   <td><input [(ngModel)]="newNestedKeys[ix][i]" name="newNestedElementKey" /></td>
-                  <td><input [(ngModel)]="newNestedValues[ix][i]" name="newNestedElementValue" /></td>
+                  <td><input [(ngModel)]="newNestedValues[ix][i]" name="newNestedElementValue" />
+                    <button class="btn btn-primary ml-4" (click)="handleAddingNewElements(languageContent[key][innerKey], ix, i)">{{'LANGUAGE_MANAGEMENT.ADD_NEW_ITEM_BUTTON' | translate }}</button>
+                  </td>
                 </tr>
-                <button class="btn btn-primary" (click)="handleAddingNewElements(languageContent[key][innerKey], ix, i)">{{'LANGUAGE_MANAGEMENT.ADD_NEW_ITEM_BUTTON' | translate }}</button>
+
                 </tbody>
               </table>
             </tr>
           </ng-template>
           <tr>
             <td><input [(ngModel)]="newKeys[ix]" name="newElementKey" /></td>
-            <td><input [(ngModel)]="newValues[ix]" name="newElementValue" /></td>
+            <td><input [(ngModel)]="newValues[ix]" name="newElementValue" />
+              <button class="btn btn-primary ml-4" (click)="handleAddingNewElements(languageContent[key], ix, undefined)">{{'LANGUAGE_MANAGEMENT.ADD_NEW_ITEM_BUTTON' | translate }}</button>
+            </td>
            </tr>
-          <button class="btn btn-primary" (click)="handleAddingNewElements(languageContent[key], ix, undefined)">{{'LANGUAGE_MANAGEMENT.ADD_NEW_ITEM_BUTTON' | translate }}</button>
+
         </tbody>
       </table>
       <div class="alert alert-danger" *ngIf="errorMsg && !hide[ix]">
@@ -121,8 +125,10 @@
     </div>
   </ng-template>
 </div>
-
+<div class="flex justify-content-end">
   <button class="btn btn-primary" *ngIf="language" (click)="saveChanges()">{{'LANGUAGE_MANAGEMENT.SUBMIT_BUTTON' | translate }}</button>
+</div>
+
 
 <div class="alert alert-danger" *ngIf="formErrorMsg" style="margin-top: 10px;">
   {{formErrorMsg}}

src/app/appmarket/admin/languagemanagement/languagelist/languagelist.component.html

@@ -52,6 +52,6 @@
     {{'LANGUAGE_MANAGEMENT.LANGUAGE_ERROR' | translate}}
   </div>
   <div class="nmaas-modal-footer">
-    <button type="button" class="btn btn-default" (click)="modal.hide()">{{'LANGUAGE_MANAGEMENT.MODAL.CLOSE_BUTTON' | translate}}</button>
+    <button type="button" class="btn btn-secondary" (click)="modal.hide()">{{'LANGUAGE_MANAGEMENT.MODAL.CLOSE_BUTTON' | translate}}</button>
   </div>
 </nmaas-modal>

src/app/appmarket/admin/monitor/details/monitor-details.component.html

@@ -36,9 +36,11 @@
         <div class="alert alert-danger" *ngIf="errMsg">
             {{errMsg}}
         </div>
+        <div class="flex justify-content-between">
+            <button type="button" class="btn btn-secondary" [routerLink]="['/admin/monitor']">{{'MONITOR_DETAILS.GO_BACK_BUTTON' | translate}}</button>
             <button *ngIf="!isInMode(ComponentMode.VIEW)" [disabled]="!monitorForm.form.valid" type="submit"
                     class="btn btn-primary">{{'MONITOR_DETAILS.SUBMIT_BUTTON' | translate}}</button>
-        <button type="button" class="btn btn-danger" [routerLink]="['/admin/monitor']">{{'MONITOR_DETAILS.GO_BACK_BUTTON' | translate}}</button>
+        </div>
     </form>
     <div *ngIf="!monitorEntry">{{'MONITOR_DETAILS.NOT_FOUND_ERROR' | translate}}</div>
 </div>