@camunda/camunda-composite-components 0.1.1 → 0.1.2-rc.0

package/README.md

@@ -55,3 +55,63 @@ return (
 
 - [Console team](https://confluence.camunda.com/display/HAN/Console+Team) started this, their C4 repo can be found [here](https://github.com/camunda-cloud/camunda-cloud-management-apps/tree/main/packages/c4)
 - [Identity team](https://github.com/camunda/team-identity): [c4-identity](https://github.com/camunda-cloud/c4-identity)
+
+## Testing
+
+### Visual regression tests (VRT)
+
+We use [Playwright](https://playwright.dev/docs/intro) screenshot tests to be aware of any visual changes introduced by dependency updates or changes in the component code.
+
+#### Running VRT locally
+
+We run VRT inside a docker container to avoid different results caused by different platforms. Simply run:
+
+```shell
+yarn start:docker-storybook
+```
+
+then
+
+```shell
+yarn test:visual-regression:docker
+```
+
+The commands above will:
+
+1. Build storybook.
+2. Start a Playwright docker container with the name `c3-visual-regression`.
+3. Serve storybook within the docker container.
+4. Run the visual regression tests within the docker container.
+
+When developing, it might not always be helpful to run all of these steps at once. You can find more granular scripts in the [package.json](package.json).
+
+#### Running VRT in the CI
+
+There is a `Visual regression tests` workflow that is triggered automatically on push. You can also trigger it manually in the `Actions` tab.
+
+If the workflow fails, you can find the test report by navigating to the workflow run summary, then scrolling down to the `Artifacts` section.
+Click on the artifact called `Playwright report` to download it, go to your downloads folder, then open the `index.html` file of the test report in your browser to view the report.
+
+#### How to deal with failing tests
+
+When a VRT fails, this can have two reasons:
+
+1. A change was introduced unknowingly. In this case, have a look at the test report and check if the change was intended. If it is, proceed with 2.
+2. You made a change to the UI on purpose. In this case you need to update the screenshot as follows.
+
+Make sure you have the `c3-visual-regression` docker container running, or start it like described [here](#running-vrt-locally).
+Then, have a look at the test report:
+
+```shell
+yarn report:visual-regression
+```
+
+Double-check that you don't apply any unwanted changes by looking at the difference that is highlighted in the failed test's report.
+
+To update all screenshots, run:
+
+```shell
+yarn update:visual-regression:docker
+```
+
+The tests should now pass locally and in the CI. Commit and push the updated screenshot(s).

package/lib/esm/api/api.d.ts

@@ -1,23 +1,23 @@
-import { Endpoints, Stage } from "./endpoints.const"
+import { Endpoints, Stage } from "./endpoints.const";
 export declare class HttpError extends Error {
-	status: number
-	constructor(message: string, status: number)
+    status: number;
+    constructor(message: string, status: number);
 }
 export interface RequestPayload {
-	base?: "notifications"
-	stage?: Stage
-	endpoints?: Endpoints
-	url: string
-	method: "get" | "post" | "put" | "delete" | "patch"
-	headers?: {
-		[key: string]: string
-	}
-	type?: "json" | "text" | "none"
-	responseType?: "json" | "text" | "none"
-	camundaAuth?: {
-		token: string
-		refreshTokenMethod: () => Promise<string>
-	}
-	body?: any
+    base?: "notifications";
+    stage?: Stage;
+    endpoints?: Endpoints;
+    url: string;
+    method: "get" | "post" | "put" | "delete" | "patch";
+    headers?: {
+        [key: string]: string;
+    };
+    type?: "json" | "text" | "none";
+    responseType?: "json" | "text" | "none";
+    camundaAuth?: {
+        token: string;
+        refreshTokenMethod: () => Promise<string>;
+    };
+    body?: any;
 }
-export declare function request(payload: RequestPayload): Promise<any>
+export declare function request(payload: RequestPayload): Promise<any>;

package/lib/esm/api/api.js

@@ -1,69 +1,71 @@
-import { getEndpoint, NOTIFICATIONS } from "./endpoints.const"
-import { JWTUtils } from "./jwt.utils"
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
+import { JWTUtils } from "./jwt.utils";
 export class HttpError extends Error {
-	status
-	constructor(message, status) {
-		super(message)
-		this.status = status
-	}
+    status;
+    constructor(message, status) {
+        super(message);
+        this.status = status;
+    }
 }
 export async function request(payload) {
-	const headers = {}
-	if (payload.camundaAuth) {
-		if (JWTUtils.isExpired(payload.camundaAuth.token)) {
-			const newToken = await payload.camundaAuth.refreshTokenMethod()
-			headers.Authorization = `Bearer ${newToken}`
-		} else {
-			headers.Authorization = `Bearer ${payload.camundaAuth.token}`
-		}
-	}
-	const type = payload.type ?? "json"
-	if (type) {
-		switch (type) {
-			case "json":
-				headers["Content-Type"] = "application/json"
-				break
-			case "text":
-				headers["Content-Type"] = "text/plain"
-				break
-		}
-	}
-	const body = payload.body ? JSON.stringify(payload.body) : undefined
-	let base
-	if (payload.base) {
-		switch (payload.base) {
-			case "notifications":
-				if (payload.endpoints?.notifications) {
-					base = payload.endpoints.notifications
-				} else if (payload.stage) {
-					base = getEndpoint(payload.stage, NOTIFICATIONS)
-				}
-				break
-		}
-	}
-	const url = base ? `${base}/${payload.url}` : payload.url
-	const response = await fetch(url, {
-		method: payload.method.toUpperCase(),
-		headers,
-		body,
-	})
-	let success = true
-	if (response.status >= 400 && response.status < 500) {
-		success = false
-	}
-	if (response.status >= 500) {
-		success = false
-	}
-	if (!success) {
-		throw new HttpError(response.statusText, response.status)
-	}
-	const responseType = payload.responseType ?? type
-	switch (responseType) {
-		case "json":
-			return response.json()
-		case "text":
-			return response.text()
-		default:
-			return response
-	}
+    const headers = {};
+    if (payload.camundaAuth) {
+        if (JWTUtils.isExpired(payload.camundaAuth.token)) {
+            const newToken = await payload.camundaAuth.refreshTokenMethod();
+            headers.Authorization = `Bearer ${newToken}`;
+        }
+        else {
+            headers.Authorization = `Bearer ${payload.camundaAuth.token}`;
+        }
+    }
+    const type = payload.type ?? "json";
+    if (type) {
+        switch (type) {
+            case "json":
+                headers["Content-Type"] = "application/json";
+                break;
+            case "text":
+                headers["Content-Type"] = "text/plain";
+                break;
+        }
+    }
+    const body = payload.body ? JSON.stringify(payload.body) : undefined;
+    let base;
+    if (payload.base) {
+        switch (payload.base) {
+            case "notifications":
+                if (payload.endpoints?.notifications) {
+                    base = payload.endpoints.notifications;
+                }
+                else if (payload.stage) {
+                    base = getEndpoint(payload.stage, NOTIFICATIONS);
+                }
+                break;
+        }
+    }
+    const url = base ? `${base}/${payload.url}` : payload.url;
+    const response = await fetch(url, {
+        method: payload.method.toUpperCase(),
+        headers,
+        body,
+    });
+    let success = true;
+    if (response.status >= 400 && response.status < 500) {
+        success = false;
+    }
+    if (response.status >= 500) {
+        success = false;
+    }
+    if (!success) {
+        throw new HttpError(response.statusText, response.status);
+    }
+    const responseType = payload.responseType ?? type;
+    switch (responseType) {
+        case "json":
+            return response.json();
+        case "text":
+            return response.text();
+        default:
+            return response;
+    }
 }

package/lib/esm/api/endpoints.const.d.ts

@@ -1,17 +1,17 @@
 export interface Endpoint {
-	id: string
-	dev: string
-	int: string
-	prod: string
+    id: string;
+    dev: string;
+    int: string;
+    prod: string;
 }
 export interface Endpoints {
-	notifications?: string
+    notifications?: string;
 }
-export declare const NOTIFICATIONS: Endpoint
-export declare type Stage = "dev" | "int" | "prod"
-export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string
+export declare const NOTIFICATIONS: Endpoint;
+export declare type Stage = "dev" | "int" | "prod";
+export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;
 export declare function getEndpointByOptions(options: {
-	stage?: Stage
-	endpoints?: Endpoints
-	endpoint: Endpoint
-}): string
+    stage?: Stage;
+    endpoints?: Endpoints;
+    endpoint: Endpoint;
+}): string;

package/lib/esm/api/endpoints.const.js

@@ -1,29 +1,30 @@
 export const NOTIFICATIONS = {
-	id: "notifications",
-	dev: "https://notifications.cloud.dev.ultrawombat.com",
-	int: "https://notifications.cloud.ultrawombat.com",
-	prod: "https://notifications.cloud.camunda.io",
-}
+    id: "notifications",
+    dev: "https://notifications.cloud.dev.ultrawombat.com",
+    int: "https://notifications.cloud.ultrawombat.com",
+    prod: "https://notifications.cloud.camunda.io",
+};
 export function getEndpoint(stage, endpoint) {
-	switch (stage) {
-		case "dev":
-			return endpoint.dev
-		case "int":
-			return endpoint.int
-		case "prod":
-			return endpoint.prod
-		default:
-			throw new Error(`Unknown stage: ${stage}`)
-	}
+    switch (stage) {
+        case "dev":
+            return endpoint.dev;
+        case "int":
+            return endpoint.int;
+        case "prod":
+            return endpoint.prod;
+        default:
+            throw new Error(`Unknown stage: ${stage}`);
+    }
 }
 export function getEndpointByOptions(options) {
-	switch (options.endpoint.id) {
-		case "notifications":
-			if (options.endpoints?.notifications) {
-				return options.endpoints.notifications
-			} else if (options.stage) {
-				return getEndpoint(options.stage, options.endpoint)
-			}
-	}
-	throw new Error(`Missing stage or notifications endpoint`)
+    switch (options.endpoint.id) {
+        case "notifications":
+            if (options.endpoints?.notifications) {
+                return options.endpoints.notifications;
+            }
+            else if (options.stage) {
+                return getEndpoint(options.stage, options.endpoint);
+            }
+    }
+    throw new Error(`Missing stage or notifications endpoint`);
 }

package/lib/esm/api/jwt.utils.d.ts

@@ -1,5 +1,5 @@
 export declare class JWTUtils {
-	static decode(token: string): any
-	static getExpiration(token: string): number
-	static isExpired(token: string): boolean
+    static decode(token: string): any;
+    static getExpiration(token: string): number;
+    static isExpired(token: string): boolean;
 }

package/lib/esm/api/jwt.utils.js

@@ -1,25 +1,23 @@
 export class JWTUtils {
-	static decode(token) {
-		const base64Url = token.split(".")[1]
-		const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/")
-		const jsonPayload = decodeURIComponent(
-			window
-				.atob(base64)
-				.split("")
-				.map(function (c) {
-					return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)
-				})
-				.join(""),
-		)
-		return JSON.parse(jsonPayload)
-	}
-	static getExpiration(token) {
-		const decoded = JWTUtils.decode(token)
-		return decoded.exp
-	}
-	static isExpired(token) {
-		const expiration = JWTUtils.getExpiration(token)
-		const now = new Date().getTime() / 1000
-		return expiration < now
-	}
+    static decode(token) {
+        const base64Url = token.split(".")[1];
+        const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+        const jsonPayload = decodeURIComponent(window
+            .atob(base64)
+            .split("")
+            .map(function (c) {
+            return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+        })
+            .join(""));
+        return JSON.parse(jsonPayload);
+    }
+    static getExpiration(token) {
+        const decoded = JWTUtils.decode(token);
+        return decoded.exp;
+    }
+    static isExpired(token) {
+        const expiration = JWTUtils.getExpiration(token);
+        const now = new Date().getTime() / 1000;
+        return expiration < now;
+    }
 }

package/lib/esm/api/notifications.d.ts

@@ -1,68 +1,39 @@
-import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types"
+import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
 export interface Notification {
-	uuid: string
-	userId?: string
-	orgId?: string
-	timestamp: number
-	source: string
-	type: string
-	title: string
-	description: string
-	state: string
-	meta?: {
-		identifier?: string
-		href?: string
-		label?: string
-		entity?: {
-			id: string
-			type: string
-		}
-		parentEntity?: {
-			id: string
-			type: string
-		}
-	}
+    uuid: string;
+    userId?: string;
+    orgId?: string;
+    timestamp: number;
+    source: string;
+    type: string;
+    title: string;
+    description: string;
+    state: string;
+    meta?: {
+        identifier?: string;
+        href?: string;
+        label?: string;
+        entity?: {
+            id: string;
+            type: string;
+        };
+        parentEntity?: {
+            id: string;
+            type: string;
+        };
+    };
 }
-export declare type AnalyticsEvent =
-	| "notification-panel-opened"
-	| "notification-clicked-cta"
+export declare type AnalyticsEvent = "notification-panel-opened" | "notification-clicked-cta";
 export declare class NotificationService {
-	static getNotifications(
-		options: C3NotificationsProps,
-	): Promise<Notification[]>
-	static sendAnalyticsEvent(
-		options: C3NotificationsProps,
-		eventOptions: {
-			event: AnalyticsEvent
-			id?: string
-		},
-	): void
-	static changeState(
-		options: C3NotificationsProps,
-		notificationId: string,
-		operation: "read" | "dismiss",
-	): void
-	static changeManyStates(
-		options: C3NotificationsProps,
-		notificationIds: string[],
-		operation: "read" | "dismiss",
-	): void
-	static notificationsStream(
-		options: C3NotificationsProps,
-		handler: (notification: Notification) => void,
-	): void
-	static updateNotifications(
-		allNotifications: Notification[],
-		newNotification: Notification,
-	): Notification[]
-	static updateNotificationState(
-		allNotifications: Notification[],
-		notificationId: string,
-		newState: "read" | "dismiss",
-	): Notification[]
-	static updateNotificationStates(
-		allNotifications: Notification[],
-		notificationIds: string[],
-		newState: "read" | "dismiss",
-	): Notification[]
+    static getNotifications(options: C3NotificationsProps): Promise<Notification[]>;
+    static sendAnalyticsEvent(options: C3NotificationsProps, eventOptions: {
+        event: AnalyticsEvent;
+        id?: string;
+    }): void;
+    static changeState(options: C3NotificationsProps, notificationId: string, operation: "read" | "dismiss"): void;
+    static changeManyStates(options: C3NotificationsProps, notificationIds: string[], operation: "read" | "dismiss"): void;
+    static notificationsStream(options: C3NotificationsProps, handler: (notification: Notification) => void): void;
+    static updateNotifications(allNotifications: Notification[], newNotification: Notification): Notification[];
+    static updateNotificationState(allNotifications: Notification[], notificationId: string, newState: "read" | "dismiss"): Notification[];
+    static updateNotificationStates(allNotifications: Notification[], notificationIds: string[], newState: "read" | "dismiss"): Notification[];
 }