Remove obsolete style rules - mx_SpaceRoomView_inviteTeammates_betaDisclaimer

[luixxiul]

This PR intends to remove mx_SpaceRoomView_inviteTeammates_betaDisclaimer style rules as the Space has left beta. This also suggests to add a Percy snapshot test as there has not been one for dialogs related to Space. The snapshot should also help us to detect a regression if any, when we replace the invite mask-image with a SVG icon next to Invite by username.

Before	After

type: task

Signed-off-by: Suguru Hirahara [email protected]

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

This change is marked as an internal change (Task), so will not be included in the changelog.

[luixxiul]

…But is this still used?

matrix-react-sdk/src/components/structures/SpaceRoomView.tsx

Lines 506 to 632 in 3bba816

	const SpaceSetupPrivateInvite: React.FC<{
	space: Room;
	onFinished(): void;
	}> = ({ space, onFinished }) => {
	const [busy, setBusy] = useState(false);
	const [error, setError] = useState("");
	const numFields = 3;
	const fieldRefs = [useRef(), useRef(), useRef()] as RefObject<Field>[];
	const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
	const fields = new Array(numFields).fill(0).map((x, i) => {
	const name = "emailAddress" + i;
	return (
	<Field
	key={name}
	name={name}
	type="text"
	label={_t("Email address")}
	placeholder={_t("Email")}
	value={emailAddresses[i]}
	onChange={(ev: React.ChangeEvent<HTMLInputElement>) => setEmailAddress(i, ev.target.value)}
	ref={fieldRefs[i]}
	onValidate={validateEmailRules}
	autoFocus={i === 0}
	disabled={busy}
	/>
	);
	});
	const onNextClick = async (ev: ButtonEvent): Promise<void> => {
	ev.preventDefault();
	if (busy) return;
	setError("");
	for (const fieldRef of fieldRefs) {
	const valid = await fieldRef.current?.validate({ allowEmpty: true });
	if (valid === false) {
	// true/null are allowed
	fieldRef.current!.focus();
	fieldRef.current!.validate({ allowEmpty: true, focused: true });
	return;
	}
	}
	setBusy(true);
	const targetIds = emailAddresses.map((name) => name.trim()).filter(Boolean);
	try {
	const result = await inviteMultipleToRoom(space.client, space.roomId, targetIds);
	const failedUsers = Object.keys(result.states).filter((a) => result.states[a] === "error");
	if (failedUsers.length > 0) {
	logger.log("Failed to invite users to space: ", result);
	setError(
	_t("Failed to invite the following users to your space: %(csvUsers)s", {
	csvUsers: failedUsers.join(", "),
	}),
	);
	} else {
	onFinished();
	}
	} catch (err) {
	logger.error("Failed to invite users to space: ", err);
	setError(_t("We couldn't invite those users. Please check the users you want to invite and try again."));
	}
	setBusy(false);
	};
	let onClick = (ev: ButtonEvent): void => {
	ev.preventDefault();
	onFinished();
	};
	let buttonLabel = _t("Skip for now");
	if (emailAddresses.some((name) => name.trim())) {
	onClick = onNextClick;
	buttonLabel = busy ? _t("Inviting…") : _t("Continue");
	}
	return (
	<div className="mx_SpaceRoomView_inviteTeammates">
	<h1>{_t("Invite your teammates")}</h1>
	<div className="mx_SpaceRoomView_description">
	{_t("Make sure the right people have access. You can invite more later.")}
	</div>
	<div className="mx_SpaceRoomView_inviteTeammates_betaDisclaimer">
	{_t(
	"<b>This is an experimental feature.</b> For now, " +
	"new users receiving an invite will have to open the invite on <link/> to actually join.",
	{},
	{
	b: (sub) => <b>{sub}</b>,
	link: () => (
	<ExternalLink href="https://app.element.io/" rel="noreferrer noopener" target="_blank">
	app.element.io
	</ExternalLink>
	),
	},
	)}
	</div>
	{error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
	<form onSubmit={onClick} id="mx_SpaceSetupPrivateInvite">
	{fields}
	</form>
	<div className="mx_SpaceRoomView_inviteTeammates_buttons">
	<AccessibleButton
	className="mx_SpaceRoomView_inviteTeammates_inviteDialogButton"
	onClick={() => showRoomInviteDialog(space.roomId)}
	>
	{_t("Invite by username")}
	</AccessibleButton>
	</div>
	<div className="mx_SpaceRoomView_buttons">
	<AccessibleButton
	kind="primary"
	disabled={busy}
	onClick={onClick}
	element="input"
	type="submit"
	form="mx_SpaceSetupPrivateInvite"
	value={buttonLabel}
	/>
	</div>
	</div>
	);
	};

This seems to have been used to render Invite your teammates dialog which was initially implemented by #5933.

[kerryarchibald]

This style is still in use.
It's safe to remove the beta disclaimer along with the styles as spaces is out of beta, and the warning about the link is no longer relevant.

[luixxiul]

yeah right, thanks for confirmation.

[kerryarchibald]

@luixxiul Can you please add a screenshot of the invite dialog with the beta card removed?

[kerryarchibald]

And update the PR title to better describe the change please!

[kerryarchibald]

Looks good, thank you. Just a couple of small requests about the PR title and screenshot, then should be good to go 🚀

[luixxiul]

The percy snapshot was not correctly specified to take "invite your teammates" dialog. I am going to submit a fix.

Currently it takes a dialog after clicking the primary button just before the invitation dialog: https://percy.io/dfde73bd/matrix-react-sdk/builds/27785922/changed/1545562064