Audit widget RELEASE (#118)

* Audit widget

* Audit widget

README.md

@@ -473,6 +473,19 @@ The widget lets you:
 Example:
 [Manage Access Keys](./projects/demo-app/src/app/manage-access-keys/manage-access-keys.component.html)
 
+#### AuditManagement
+
+The `AuditManagement` widget will let you embed an audit table in your site.
+
+###### Usage
+
+```html
+<audit-management tenant="tenant-id" widgetId="audit-management-widget" />
+```
+
+Example:
+[Manage Audit](./projects/demo-app/src/app/manage-audit/manage-audit.component.html)
+
 ## Code Example
 
 You can find an example angular app in the [examples folder](./projects/demo-app).

package.json

@@ -33,10 +33,11 @@
 		]
 	},
 	"dependencies": {
-		"@descope/user-management-widget": "0.4.27",
-		"@descope/role-management-widget": "0.1.26",
-		"@descope/access-key-management-widget": "0.1.26",
-		"@descope/web-component": "3.8.32",
+		"@descope/access-key-management-widget": "0.1.35",
+		"@descope/audit-management-widget": "0.1.0",
+		"@descope/role-management-widget": "0.1.35",
+		"@descope/user-management-widget": "0.4.36",
+		"@descope/web-component": "3.8.39",
 		"tslib": "^2.3.0"
 	},
 	"optionalDependencies": {

projects/angular-sdk/ng-package.json

@@ -8,6 +8,7 @@
 		"@descope/web-component",
 		"@descope/user-management-widget",
 		"@descope/role-management-widget",
-		"@descope/access-key-management-widget"
+		"@descope/access-key-management-widget",
+		"@descope/audit-management-widget"
 	]
 }

projects/angular-sdk/src/lib/components/audit-management/audit-management.component.spec.ts

@@ -0,0 +1,79 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuditManagementComponent } from './audit-management.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeAuditManagementWidget
+jest.mock('@descope/audit-management-widget', () => {
+	return jest.fn(() => {
+		// Create a mock DOM element
+		return document.createElement('descope-audit-management-widget');
+	});
+});
+
+describe('DescopeAuditManagementComponent', () => {
+	let component: AuditManagementComponent;
+	let fixture: ComponentFixture<AuditManagementComponent>;
+	let mockedCreateSdk: jest.Mock;
+	const onSessionTokenChangeSpy = jest.fn();
+	const onAuditChangeSpy = jest.fn();
+	const afterRequestHooksSpy = jest.fn();
+	const mockConfig: DescopeAuthConfig = {
+		projectId: 'someProject'
+	};
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: onSessionTokenChangeSpy,
+			onAuditChange: onAuditChangeSpy,
+			httpClient: {
+				hooks: {
+					afterRequest: afterRequestHooksSpy
+				}
+			}
+		});
+
+		TestBed.configureTestingModule({
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			providers: [
+				DescopeAuthConfig,
+				{ provide: DescopeAuthConfig, useValue: mockConfig }
+			]
+		});
+
+		fixture = TestBed.createComponent(AuditManagementComponent);
+		component = fixture.componentInstance;
+		component.projectId = '123';
+		component.tenant = 'tenant-1';
+		component.widgetId = 'widget-1';
+		component.logger = { info: jest.fn(), error: jest.fn(), warn: jest.fn() };
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+		const html: HTMLElement = fixture.nativeElement;
+		const webComponentHtml = html.querySelector(
+			'descope-audit-management-widget'
+		);
+		expect(webComponentHtml).toBeDefined();
+	});
+
+	it('should correctly setup attributes based on inputs', () => {
+		const html: HTMLElement = fixture.nativeElement;
+		const webComponentHtml = html.querySelector(
+			'descope-audit-management-widget'
+		)!;
+		expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+		expect(webComponentHtml.getAttribute('tenant')).toStrictEqual('tenant-1');
+		expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+			'widget-1'
+		);
+		expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+	});
+});

projects/angular-sdk/src/lib/components/audit-management/audit-management.component.ts

@@ -0,0 +1,58 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeAuditManagementWidget from '@descope/audit-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+	selector: 'audit-management[tenant]',
+	standalone: true,
+	template: ''
+})
+export class AuditManagementComponent implements OnInit, OnChanges {
+	projectId: string;
+	baseUrl?: string;
+	@Input() tenant: string;
+	@Input() widgetId: string;
+
+	@Input() theme: 'light' | 'dark' | 'os';
+	@Input() debug: boolean;
+	@Input() logger: ILogger;
+
+	private readonly webComponent = new DescopeAuditManagementWidget();
+
+	constructor(
+		private elementRef: ElementRef,
+		descopeConfig: DescopeAuthConfig
+	) {
+		this.projectId = descopeConfig.projectId;
+		this.baseUrl = descopeConfig.baseUrl;
+	}
+
+	ngOnInit() {
+		this.setupWebComponent();
+		this.elementRef.nativeElement.appendChild(this.webComponent);
+	}
+
+	ngOnChanges(): void {
+		this.setupWebComponent();
+	}
+
+	private setupWebComponent() {
+		this.webComponent.setAttribute('project-id', this.projectId);
+		this.webComponent.setAttribute('tenant', this.tenant);
+		this.webComponent.setAttribute('widget-id', this.widgetId);
+		if (this.baseUrl) {
+			this.webComponent.setAttribute('base-url', this.baseUrl);
+		}
+		if (this.theme) {
+			this.webComponent.setAttribute('theme', this.theme);
+		}
+		if (this.debug) {
+			this.webComponent.setAttribute('debug', this.debug.toString());
+		}
+
+		if (this.logger) {
+			(this.webComponent as any).logger = this.logger;
+		}
+	}
+}