client: minor refactors for RoomSettingsForm (#1762)

client/src/components/RoomSettingsForm.vue

@@ -161,13 +161,15 @@ import { useI18n } from "vue-i18n";
 import { OttApiResponseGetRoom } from "ott-common/models/rest-api";
 import { ALL_SKIP_CATEGORIES } from "ott-common/constants";
 import { useGrants } from "./composables/grants";
+import { useRoute } from "vue-router";
 
 const store = useStore();
 const { t } = useI18n();
 const granted = useGrants();
+const route = useRoute();
 
 const isLoadingRoomSettings = ref(false);
-const inputRoomSettings: Ref<RoomSettings> = ref<RoomSettings>({
+const inputRoomSettings = ref<RoomSettings>({
 	title: "",
 	description: "",
 	visibility: Visibility.Public,
@@ -176,30 +178,35 @@ const inputRoomSettings: Ref<RoomSettings> = ref<RoomSettings>({
 	autoSkipSegmentCategories: Array.from([]),
 	restoreQueueBehavior: BehaviorOption.Prompt,
 	enableVoteSkip: false,
-});
+}) as Ref<RoomSettings>;
 
 onMounted(async () => {
 	await loadRoomSettings();
 });
 
+function intoSettings(obj: OttApiResponseGetRoom): RoomSettings {
+	return {
+		..._.omit(obj, [
+			"name",
+			"isTemporary",
+			"users",
+			"queue",
+			"permissions",
+			"hasOwner",
+			"grants",
+		]),
+		grants: new Grants(obj.grants),
+	};
+}
+
 async function loadRoomSettings() {
 	// we have to make an API request because visibility is not sent in sync messages.
 	isLoadingRoomSettings.value = true;
 	try {
-		const res = await API.get<OttApiResponseGetRoom>(`/room/${store.state.room.name}`);
-		const settings = res.data;
-		settings.grants = new Grants(res.data.grants);
-		inputRoomSettings.value = _.pick(
-			settings,
-			"title",
-			"description",
-			"visibility",
-			"queueMode",
-			"grants",
-			"autoSkipSegmentCategories",
-			"restoreQueueBehavior",
-			"enableVoteSkip"
+		const res = await API.get<OttApiResponseGetRoom>(
+			`/room/${route.params.roomId ?? store.state.room.name}`
 		);
+		inputRoomSettings.value = intoSettings(res.data);
 	} catch (err) {
 		toast.add({
 			content: t("room-settings.load-failed"),
@@ -210,7 +217,7 @@ async function loadRoomSettings() {
 	isLoadingRoomSettings.value = false;
 }
 
-function getRoomSettingsSubmit() {
+function getRoomSettingsSubmit(): Partial<RoomSettings> {
 	const propsToGrants = {
 		title: "set-title",
 		description: "set-description",
@@ -233,7 +240,10 @@ function getRoomSettingsSubmit() {
 async function submitRoomSettings() {
 	isLoadingRoomSettings.value = true;
 	try {
-		await API.patch(`/room/${store.state.room.name}`, getRoomSettingsSubmit());
+		await API.patch(
+			`/room/${route.params.roomId ?? store.state.room.name}`,
+			getRoomSettingsSubmit()
+		);
 		toast.add({
 			style: ToastStyle.Success,
 			content: t("room-settings.settings-applied").toString(),
@@ -253,13 +263,13 @@ async function submitRoomSettings() {
 async function claimOwnership() {
 	isLoadingRoomSettings.value = true;
 	try {
-		await API.patch(`/room/${store.state.room.name}`, {
+		await API.patch(`/room/${route.params.roomId ?? store.state.room.name}`, {
 			claim: true,
 		});
 		toast.add({
 			style: ToastStyle.Success,
 			content: t("room-settings.now-own-the-room", {
-				room: store.state.room.name,
+				room: route.params.roomId ?? store.state.room.name,
 			}).toString(),
 			duration: 4000,
 		});

client/tests/e2e/support/commands.ts

@@ -65,21 +65,12 @@ Cypress.Commands.add("mount", (component, options = {}) => {
 	});
 
 	// create router if one is not provided
-	// @ts-expect-error
-	if (!options.router) {
-		// @ts-expect-error
-		options.router = createRouter({
-			routes: [],
-			history: createMemoryHistory(),
-		});
-	}
-
-	options.global.plugins.push({
-		install(app) {
-			// @ts-expect-error
-			app.use(options.router);
-		},
+	const router = createRouter({
+		routes: routes,
+		history: createMemoryHistory(),
 	});
+	cy.wrap(router).as("router");
+	options.global.plugins.push(router);
 
 	const sfx = new OttSfx();
 	options.global.plugins.push({
@@ -128,6 +119,10 @@ Cypress.Commands.add("store", () => {
 	return cy.get("@store") as any;
 });
 
+Cypress.Commands.add("router", () => {
+	return cy.get("@router") as any;
+});
+
 Cypress.Commands.add("connection", () => {
 	return cy.get("@connection") as any;
 });

client/tests/e2e/support/component.ts

@@ -27,6 +27,7 @@ import type { FullOTTStoreState } from "../../../src/store";
 import type { Store } from "vuex";
 import type { OttRoomConnectionMock } from "../../../src/plugins/connection";
 import type { Role } from "ott-common";
+import type { Router } from "vue-router";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -42,6 +43,7 @@ declare global {
 			): Chainable<{ wrapper: VueWrapper<any>; component: unknown }>;
 			emitted(event: string): Chainable<unknown[]>;
 			store(): Chainable<Store<FullOTTStoreState>>;
+			router(): Chainable<Router>;
 			connection(): Chainable<OttRoomConnectionMock>;
 			getPermissionCheckbox(permission: string, role: Role): Chainable<HTMLElement>;
 		}

common/models/types.ts

@@ -62,7 +62,7 @@ export interface RoomSettings {
 	visibility: Visibility;
 	queueMode: QueueMode;
 	grants: Grants;
-	autoSkipSegmentCategories: Array<Category>;
+	autoSkipSegmentCategories: Category[];
 	restoreQueueBehavior: BehaviorOption;
 	enableVoteSkip: boolean;
 }

tests/e2e/integration/room-settings.spec.ts

@@ -33,10 +33,13 @@ describe("Room settings", () => {
 				url: "/api/room/generate",
 			}).then(resp => {
 				// @ts-expect-error
-				cy.visit(`/room/${resp.body.room}`);
+				const room = resp.body.room;
+				cy.visit(`/room/${room}`);
+				cy.intercept("GET", `/api/room/${room}`).as("getRoom");
 			});
 
 			cy.contains("Settings").click();
+			cy.wait("@getRoom");
 			cy.contains("button", "Save")
 				.should("exist")
 				.scrollIntoView()