Kamu UI 450 terms and conditions UI (#473)

* Added laoyour for Tos

* Extended feature flags

* changed CHANGELOG.md

* fixed CHANGELOG.md

---------

Co-authored-by: Dmitriy Borzenko <[email protected]>

Author: dmitriy-borzenko

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+### Added
+- Added Terms of Service link
+
 ## [0.30.0] - 2024-11-22
 ### Added
 - Added a new page `Query` that allows you to make sql queries without being tied to a dataset

src/app/app-config.model.ts

@@ -22,6 +22,7 @@ export interface AppConfigFeatureFlags {
     enableLogout: boolean;
     enableScheduling: boolean;
     enableDatasetEnvVarsManagment: boolean;
+    enableTermsOfService: boolean;
 }
 
 export interface GrafanaLogsConfiguration {

src/app/app.component.ts

@@ -41,6 +41,7 @@ export class AppComponent extends BaseComponent implements OnInit {
         enableLogout: true,
         enableScheduling: true,
         enableDatasetEnvVarsManagment: true,
+        enableTermsOfService: true,
     };
 
     public readonly APP_LOGO = `/${AppValues.APP_LOGO}`;

src/app/auth/login/login.component.html

@@ -20,6 +20,9 @@ <h1 class="text-center text-muted mt-4">Select your Login Method</h1>
             >
                 Login with Password
             </a>
+            <ng-container *ngIf="enableTermsOfService">
+                <ng-container *ngTemplateOutlet="termsOfServiceFragment"></ng-container>
+            </ng-container>
         </div>
     </div>
 </ng-container>
@@ -88,5 +91,17 @@ <h1 class="text-center text-muted mt-4">Login to Kamu</h1>
         <div *ngIf="passwordLoginError$ | async as passwordLoginError" class="mt-4">
             <div class="error-block" data-test-id="password-method-error">{{ passwordLoginError }}</div>
         </div>
+        <div class="mt-30" *ngIf="enableTermsOfService">
+            <ng-container *ngTemplateOutlet="termsOfServiceFragment"></ng-container>
+        </div>
     </form>
 </div>
+
+<ng-template #termsOfServiceFragment>
+    <p class="text-center fs-12">
+        By logging in you accept the
+        <a class="fs-12 tos-link" href="https://docs.kamu.dev/terms-of-service" target="_blank"
+            >Kamu Terms of Service</a
+        >
+    </p>
+</ng-template>

src/app/auth/login/login.component.scss

@@ -5,10 +5,24 @@ a {
     color: $app-dark;
 }
 
+.tos-link {
+    text-decoration: underline;
+    color: #0d6efd;
+}
+
+p {
+    margin: 0;
+}
+
+.mt-30 {
+    margin-top: 30px;
+}
+
 .login-container__buttons {
     height: 100vh;
-    overflow: hidden;
-    margin-top: 200px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
 
     .inner-container {
         border: 1px solid $app-color-border-default;
@@ -17,7 +31,7 @@ a {
         display: flex;
         justify-content: center;
         flex-direction: column;
-        gap: 40px;
+        gap: 30px;
         border-radius: 6px;
     }
 
@@ -26,7 +40,7 @@ a {
         display: flex;
         justify-content: center;
         border: 1px solid $app-color-border-default;
-        width: 200px;
+        width: 280px;
         padding: 5px 15px;
         border-radius: 6px;
         background-color: #ebeef1;

src/app/auth/login/login.component.spec.ts

@@ -39,6 +39,12 @@ describe("LoginComponent", () => {
     let localStorageService: LocalStorageService;
     let authApi: AuthApi;
     let httpController: HttpTestingController;
+    const MOCK_FEATURE_FLAGS = {
+        enableLogout: true,
+        enableScheduling: true,
+        enableDatasetEnvVarsManagment: true,
+        enableTermsOfService: true,
+    };
 
     enum Elements {
         METHOD_SELECTION_BLOCK = "method-selection-block",
@@ -98,11 +104,7 @@ describe("LoginComponent", () => {
     describe("Main test suite", () => {
         beforeEach(() => {
             appConfigService = TestBed.inject(AppConfigService);
-            spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
-                enableLogout: true,
-                enableScheduling: true,
-                enableDatasetEnvVarsManagment: true,
-            });
+            spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue(MOCK_FEATURE_FLAGS);
             spyOnProperty(loginService, "loginMethods", "get").and.returnValue([
                 LoginMethod.GITHUB,
                 LoginMethod.PASSWORD,
@@ -266,11 +268,7 @@ describe("LoginComponent", () => {
 
             beforeEach(() => {
                 appConfigService = TestBed.inject(AppConfigService);
-                spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
-                    enableLogout: true,
-                    enableScheduling: true,
-                    enableDatasetEnvVarsManagment: true,
-                });
+                spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue(MOCK_FEATURE_FLAGS);
                 spyOnProperty(loginService, "loginMethods", "get").and.returnValue([loginMethod]);
 
                 spyGotoGithub = spyOn(loginService, "gotoGithub").and.stub();
@@ -297,11 +295,7 @@ describe("LoginComponent", () => {
     describe("Zero-method-config", () => {
         beforeEach(() => {
             appConfigService = TestBed.inject(AppConfigService);
-            spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue({
-                enableLogout: true,
-                enableScheduling: true,
-                enableDatasetEnvVarsManagment: true,
-            });
+            spyOnProperty(appConfigService, "featureFlags", "get").and.returnValue(MOCK_FEATURE_FLAGS);
             spyOnProperty(loginService, "loginMethods", "get").and.returnValue([]);
         });
 

src/app/auth/login/login.component.ts

@@ -12,6 +12,7 @@ import { BaseComponent } from "src/app/common/base.component";
 import { LocalStorageService } from "src/app/services/local-storage.service";
 import { LoginFormType } from "./login.component.model";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { AppConfigService } from "src/app/app-config.service";
 
 @Component({
     selector: "app-login",
@@ -27,6 +28,7 @@ export class LoginComponent extends BaseComponent implements OnInit {
     private route = inject(ActivatedRoute);
     private fb = inject(FormBuilder);
     private loginService = inject(LoginService);
+    private appConfigService = inject(AppConfigService);
 
     public readonly APP_LOGO = `/${AppValues.APP_LOGO}`;
     public readonly LoginMethod = LoginMethod;
@@ -64,6 +66,10 @@ export class LoginComponent extends BaseComponent implements OnInit {
         return this.passwordLoginForm.get("password");
     }
 
+    public get enableTermsOfService(): boolean {
+        return this.appConfigService.featureFlags.enableTermsOfService;
+    }
+
     public onSelectedLoginMethod(loginMethod: LoginMethod): void {
         this.selectedLoginMethod = loginMethod;
         if (loginMethod === LoginMethod.GITHUB) {

src/app/components/app-header/app-header.component.spec.ts

@@ -87,6 +87,7 @@ describe("AppHeaderComponent", () => {
             enableLogout: true,
             enableScheduling: true,
             enableDatasetEnvVarsManagment: true,
+            enableTermsOfService: true,
         };
         component.loginMethods = [LoginMethod.GITHUB, LoginMethod.PASSWORD];
         component.isVisible = true;

src/assets/runtime-config.json

@@ -6,7 +6,8 @@
   "featureFlags": {
     "enableLogout": true,
     "enableScheduling": true,
-    "enableDatasetEnvVarsManagment": true
+    "enableDatasetEnvVarsManagment": true,
+    "enableTermsOfService": true
   },
   "grafanaLogs": {
     "taskDetailsUrl": " https://grafana.sha.stg.internal.kamu.dev/explore?schemaVersion=1&panes=%7B%22LYy%22%3A%7B%22datasource%22%3A%22365dd1cc-3781-43c1-86a1-a3f78c6ab420%22%2C%22queries%22%3A%5B%7B%22refId%22%3A%22A%22%2C%22expr%22%3A%22%7Bjob%3D%5C%22europort%2Fkamu-api-server%5C%22%7D+%7C+json+root_span%2C+task_id%3D%5C%22log.spans%5B0%5D.task_id%5C%22%2C+target%3D%5C%22log.target%5C%22%2C+message%3D%5C%22log.fields.message%5C%22+%7C+task_id+%3D+%60{{taskId}}%60+%7C%3D+%60%60%22%2C%22queryType%22%3A%22range%22%2C%22datasource%22%3A%7B%22type%22%3A%22loki%22%2C%22uid%22%3A%22365dd1cc-3781-43c1-86a1-a3f78c6ab420%22%7D%2C%22editorMode%22%3A%22builder%22%7D%5D%2C%22range%22%3A%7B%22from%22%3A%22{{fromTime}}%22%2C%22to%22%3A%22{{toTime}}%22%7D%7D%7D&orgId=1",