PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Remove feedback buttons from onboarding, search, and spaces (#10506)

Browse source
This commit is contained in:
Michael Telatynski 2023-04-05 12:17:25 +01:00 committed by GitHub
parent df89d2ce28
commit 09eefe14ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 4 additions and 305 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.pcss
View file

@ -365,7 +365,6 @@
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
@import "./views/typography/_Heading.pcss";
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@import "./views/user-onboarding/_UserOnboardingFeedback.pcss";
@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
@import "./views/user-onboarding/_UserOnboardingList.pcss";
@import "./views/user-onboarding/_UserOnboardingPage.pcss";

14
res/css/structures/_SpaceRoomView.pcss
View file

@ -96,10 +96,6 @@ $SpaceRoomViewInnerWidth: 428px;
}
}
&:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt {
width: $SpaceRoomViewInnerWidth;
}
.mx_SpaceRoomView_buttons {
display: block;
margin-top: 44px;
@ -153,16 +149,6 @@ $SpaceRoomViewInnerWidth: 428px;
border-radius: 12px;
}
}
/* XXX: Temporary for the Spaces release only */
.mx_SpaceFeedbackPrompt {
padding: 7px; /* 8px - 1px border */
border: 1px solid rgba($primary-content, 0.1);
border-radius: 8px;
width: max-content;
height: fit-content;
margin-left: 24px;
}
}
.mx_SpaceRoomView_landing_name {

20
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -511,24 +511,4 @@ limitations under the License.
}
}
}
.mx_SpotlightDialog_footer {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
padding: $spacing-12 $spacing-16 $spacing-16;
display: flex;
border-top: 1px solid $quinary-content;
> span {
align-self: center;
}
.mx_AccessibleButton_kind_primary_outline {
padding: $spacing-4 $spacing-8;
border-color: $secondary-content;
color: $secondary-content;
margin-left: auto;
}
}
}

25
res/css/views/spaces/_SpaceCreateMenu.pcss
View file

@ -42,13 +42,6 @@ $spacePanelWidth: 68px;
font-size: $font-15px;
color: $secondary-content;
}
/* XXX: Temporary for the Spaces release only */
.mx_SpaceFeedbackPrompt {
border-top: 1px solid $input-border-color;
padding-top: 12px;
margin-top: 16px;
}
}
.mx_SpaceCreateMenuType {
@ -100,21 +93,3 @@ $spacePanelWidth: 68px;
}
}
}
.mx_SpaceFeedbackPrompt {
font-size: $font-15px;
line-height: $font-24px;
> span {
color: $secondary-content;
position: relative;
font-size: inherit;
line-height: inherit;
margin-right: 8px;
}
.mx_AccessibleButton_kind_link {
color: $accent;
position: relative;
}
}

41
res/css/views/user-onboarding/_UserOnboardingFeedback.pcss
View file

@ -1,41 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UserOnboardingFeedback {
display: flex;
flex-direction: row;
padding: $spacing-32;
border-radius: 8px;
background: $system;
gap: $spacing-64;
.mx_UserOnboardingFeedback_content {
display: flex;
flex-direction: column;
margin-right: auto;
gap: 6px;
.mx_UserOnboardingFeedback_text {
color: $secondary-content;
}
}
.mx_UserOnboardingFeedback_action.mx_AccessibleButton {
background: transparent;
min-width: 180px;
align-self: center;
}
}

4
res/css/views/user-onboarding/_UserOnboardingList.pcss
View file

@ -48,10 +48,6 @@ limitations under the License.
@mixin ProgressBarBorderRadius 16px;
}
.mx_UserOnboardingFeedback {
margin-top: $spacing-16;
}
}
.mx_UserOnboardingList_list {

2
src/components/structures/SpaceRoomView.tsx
View file

@ -71,7 +71,6 @@ import RoomTopic from "../views/elements/RoomTopic";
import withValidation from "../views/elements/Validation";
import RoomInfoLine from "../views/rooms/RoomInfoLine";
import RoomPreviewCard from "../views/rooms/RoomPreviewCard";
import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
import SpacePublicShare from "../views/spaces/SpacePublicShare";
import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
import MainSplit from "./MainSplit";
@ -269,7 +268,6 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
<div className="mx_SpaceRoomView_landing">
<div className="mx_SpaceRoomView_landing_header">
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
<SpaceFeedbackPrompt />
</div>
<div className="mx_SpaceRoomView_landing_name">
<RoomName room={space}>

3
src/components/structures/UserMenu.tsx
View file

@ -51,6 +51,7 @@ import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePaylo
import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg";
import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast";
import { SDKContext } from "../../contexts/SDKContext";
import { shouldShowFeedback } from "../../utils/Feedback";
interface IProps {
isPanelCollapsed: boolean;
@ -333,7 +334,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
}
let feedbackButton: JSX.Element | undefined;
if (SettingsStore.getValue(UIFeature.Feedback)) {
if (shouldShowFeedback()) {
feedbackButton = (
<IconizedContextMenuOption
iconClassName="mx_UserMenu_iconMessage"

31
src/components/views/dialogs/spotlight/SpotlightDialog.tsx
View file

@ -54,7 +54,6 @@ import { useUserDirectory } from "../../../../hooks/useUserDirectory";
import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
import { _t } from "../../../../languageHandler";
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
import Modal from "../../../../Modal";
import { PosthogAnalytics } from "../../../../PosthogAnalytics";
import { getCachedRoomIDForAlias } from "../../../../RoomAliasCache";
import { showStartChatInviteDialog } from "../../../../RoomInvite";
@ -81,14 +80,12 @@ import LabelledCheckbox from "../../elements/LabelledCheckbox";
import Spinner from "../../elements/Spinner";
import NotificationBadge from "../../rooms/NotificationBadge";
import BaseDialog from "../BaseDialog";
import FeedbackDialog from "../FeedbackDialog";
import { Option } from "./Option";
import { PublicRoomResultDetails } from "./PublicRoomResultDetails";
import { RoomResultContextMenus } from "./RoomResultContextMenus";
import { RoomContextDetails } from "../../rooms/RoomContextDetails";
import { TooltipOption } from "./TooltipOption";
import { isLocalRoom } from "../../../../utils/localRoom/isLocalRoom";
import { shouldShowFeedback } from "../../../../utils/Feedback";
import RoomAvatar from "../../avatars/RoomAvatar";
import { useFeatureEnabled } from "../../../../hooks/useSettings";
import { filterBoolean } from "../../../../utils/arrays";
@ -1157,14 +1154,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
}
};
const openFeedback = shouldShowFeedback()
? () => {
Modal.createDialog(FeedbackDialog, {
feature: "spotlight",
});
}
: null;
const activeDescendant = rovingContext.state.activeRef?.current?.id;
return (
@ -1242,26 +1231,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
>
{content}
</div>
<div className="mx_SpotlightDialog_footer">
{openFeedback &&
_t(
"Results not as expected? Please <a>give feedback</a>.",
{},
{
a: (sub) => (
<AccessibleButton kind="link_inline" onClick={openFeedback}>
{sub}
</AccessibleButton>
),
},
)}
{openFeedback && (
<AccessibleButton kind="primary_outline" onClick={openFeedback}>
{_t("Feedback")}
</AccessibleButton>
)}
</div>
</BaseDialog>
</>
);

41
src/components/views/spaces/SpaceCreateMenu.tsx
View file

@ -41,14 +41,9 @@ import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import Field from "../elements/Field";
import withValidation from "../elements/Validation";
import RoomAliasField from "../elements/RoomAliasField";
import Modal from "../../../Modal";
import GenericFeatureFeedbackDialog from "../dialogs/GenericFeatureFeedbackDialog";
import SettingsStore from "../../../settings/SettingsStore";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { shouldShowFeedback } from "../../../utils/Feedback";
export const createSpace = async (
name: string,
isPublic: boolean,
@ -118,40 +113,6 @@ const nameToLocalpart = (name: string): string => {
.replace(/[^a-z0-9_-]+/gi, "");
};
// XXX: Temporary for the Spaces release only
export const SpaceFeedbackPrompt: React.FC<{
onClick?(): void;
}> = ({ onClick }) => {
if (!shouldShowFeedback()) return null;
return (
<div className="mx_SpaceFeedbackPrompt">
<span className="mx_SpaceFeedbackPrompt_text">{_t("Spaces are a new feature.")}</span>
<AccessibleButton
kind="link_inline"
onClick={() => {
if (onClick) onClick();
Modal.createDialog(GenericFeatureFeedbackDialog, {
title: _t("Spaces feedback"),
subheading: _t(
"Thank you for trying Spaces. " + "Your feedback will help inform the next versions.",
),
rageshakeLabel: "spaces-feedback",
rageshakeData: Object.fromEntries(
["Spaces.allRoomsInHome", "Spaces.enabledMetaSpaces"].map((k) => [
k,
SettingsStore.getValue(k),
]),
),
});
}}
>
{_t("Give feedback.")}
</AccessibleButton>
</div>
);
};
type BProps = Omit<ComponentProps<typeof SpaceBasicSettings>, "nameDisabled" | "topicDisabled" | "avatarDisabled">;
interface ISpaceCreateFormProps extends BProps {
busy: boolean;
@ -316,8 +277,6 @@ const SpaceCreateMenu: React.FC<{
/>
<p>{_t("To join a space you'll need an invite.")}</p>
<SpaceFeedbackPrompt onClick={onFinished} />
</React.Fragment>
);
} else {

59
src/components/views/user-onboarding/UserOnboardingFeedback.tsx
View file

@ -1,59 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
import SdkConfig from "../../../SdkConfig";
import AccessibleButton from "../../views/elements/AccessibleButton";
import Heading from "../../views/typography/Heading";
import FeedbackDialog from "../dialogs/FeedbackDialog";
import { shouldShowFeedback } from "../../../utils/Feedback";
export function UserOnboardingFeedback(): JSX.Element {
if (!shouldShowFeedback()) {
return <></>;
}
return (
<div className="mx_UserOnboardingFeedback" data-testid="user-onboarding-feedback">
<div className="mx_UserOnboardingFeedback_content">
<Heading size="h4" className="mx_UserOnboardingFeedback_title">
{_t("How are you finding %(brand)s so far?", {
brand: SdkConfig.get("brand"),
})}
</Heading>
<div className="mx_UserOnboardingFeedback_text">
{_t("We’d appreciate any feedback on how you’re finding %(brand)s.", {
brand: SdkConfig.get("brand"),
})}
</div>
</div>
<AccessibleButton
kind="primary_outline"
className="mx_UserOnboardingFeedback_action"
onClick={() => {
Modal.createDialog(FeedbackDialog, {
feature: "use-case-selection",
});
}}
>
{_t("Feedback")}
</AccessibleButton>
</div>
);
}

2
src/components/views/user-onboarding/UserOnboardingList.tsx
View file

@ -21,7 +21,6 @@ import { _t } from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig";
import ProgressBar from "../../views/elements/ProgressBar";
import Heading from "../../views/typography/Heading";
import { UserOnboardingFeedback } from "./UserOnboardingFeedback";
import { UserOnboardingTask } from "./UserOnboardingTask";
export const getUserOnboardingCounters = (
@ -66,7 +65,6 @@ export function UserOnboardingList({ tasks }: Props): JSX.Element {
</div>
<div className="mx_UserOnboardingList_progress">
<ProgressBar value={completed} max={total} animated />
{waiting === 0 && <UserOnboardingFeedback />}
</div>
<ol className="mx_UserOnboardingList_list">
{tasks.map((task) => (

9
src/i18n/strings/en_EN.json
View file

@ -1238,9 +1238,6 @@
"Headphones": "Headphones",
"Folder": "Folder",
"Welcome": "Welcome",
"How are you finding %(brand)s so far?": "How are you finding %(brand)s so far?",
"We’d appreciate any feedback on how you’re finding %(brand)s.": "We’d appreciate any feedback on how you’re finding %(brand)s.",
"Feedback": "Feedback",
"Secure messaging for friends and family": "Secure messaging for friends and family",
"With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.": "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.",
"Start your first chat": "Start your first chat",
@ -1278,10 +1275,6 @@
"No results": "No results",
"Search %(spaceName)s": "Search %(spaceName)s",
"Please enter a name for the space": "Please enter a name for the space",
"Spaces are a new feature.": "Spaces are a new feature.",
"Spaces feedback": "Spaces feedback",
"Thank you for trying Spaces. Your feedback will help inform the next versions.": "Thank you for trying Spaces. Your feedback will help inform the next versions.",
"Give feedback.": "Give feedback.",
"e.g. my-space": "e.g. my-space",
"Address": "Address",
"Create a space": "Create a space",
@ -2846,6 +2839,7 @@
"Feedback sent": "Feedback sent",
"Comment": "Comment",
"Your platform and username will be noted to help us use your feedback as much as we can.": "Your platform and username will be noted to help us use your feedback as much as we can.",
"Feedback": "Feedback",
"You may contact me if you want to follow up or to let me test out upcoming ideas": "You may contact me if you want to follow up or to let me test out upcoming ideas",
"PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.",
"Report a bug": "Report a bug",
@ -3123,7 +3117,6 @@
"Use <arrows/> to scroll": "Use <arrows/> to scroll",
"Search Dialog": "Search Dialog",
"Remove search filter for %(filter)s": "Remove search filter for %(filter)s",
"Results not as expected? Please <a>give feedback</a>.": "Results not as expected? Please <a>give feedback</a>.",
"Wrong file type": "Wrong file type",
"Looks good!": "Looks good!",
"Wrong Security Key": "Wrong Security Key",

23
test/components/views/dialogs/SpotlightDialog-test.tsx
View file

@ -26,7 +26,6 @@ import { LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../../../src/models/LocalRoo
import { DirectoryMember, startDmOnFirstMessage } from "../../../../src/utils/direct-messages";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import { flushPromisesWithFakeTimers, mkRoom, stubClient } from "../../../test-utils";
import { shouldShowFeedback } from "../../../../src/utils/Feedback";
import SettingsStore from "../../../../src/settings/SettingsStore";
import { SettingLevel } from "../../../../src/settings/SettingLevel";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
@ -387,28 +386,6 @@ describe("Spotlight Dialog", () => {
);
});
describe("Feedback prompt", () => {
it("should show feedback prompt if feedback is enabled", async () => {
mocked(shouldShowFeedback).mockReturnValue(true);
render(<SpotlightDialog initialText="test23" onFinished={() => null} />);
jest.advanceTimersByTime(200);
await flushPromisesWithFakeTimers();
expect(screen.getByText("give feedback")).toBeInTheDocument();
});
it("should hide feedback prompt if feedback is disabled", async () => {
mocked(shouldShowFeedback).mockReturnValue(false);
render(<SpotlightDialog initialText="test23" onFinished={() => null} />);
jest.advanceTimersByTime(200);
await flushPromisesWithFakeTimers();
expect(screen.queryByText("give feedback")).not.toBeInTheDocument();
});
});
describe("nsfw public rooms filter", () => {
const nsfwNameRoom: IPublicRoomsChunkRoom = {
room_id: "@room1:matrix.org",

34
test/components/views/user-onboarding/UserOnboardingList-test.tsx
View file

@ -14,14 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { screen, render } from "@testing-library/react";
import {
getUserOnboardingCounters,
UserOnboardingList,
} from "../../../../src/components/views/user-onboarding/UserOnboardingList";
import SdkConfig from "../../../../src/SdkConfig";
import { getUserOnboardingCounters } from "../../../../src/components/views/user-onboarding/UserOnboardingList";
const tasks = [
{
@ -61,28 +54,3 @@ describe("getUserOnboardingCounters()", () => {
expect(result).toStrictEqual(expectation);
});
});
describe("UserOnboardingList", () => {
// This configuration affects rendering of the feedback and needs to be set.
beforeAll(() => {
SdkConfig.put({
bug_report_endpoint_url: "https://bug_report_endpoint_url.com",
});
});
it("should not display feedback when there are waiting tasks", async () => {
render(<UserOnboardingList tasks={tasks} />);
expect(await screen.findByText("Only 1 step to go")).toBeVisible();
expect(await screen.queryByTestId("user-onboarding-feedback")).toBeNull();
expect(await screen.findAllByTestId("user-onboarding-task")).toHaveLength(2);
});
it("should display feedback when all tasks are completed", async () => {
render(<UserOnboardingList tasks={tasks.map((task) => ({ ...task, completed: true }))} />);
expect(await screen.findByText("You did it!")).toBeVisible();
expect(await screen.findByTestId("user-onboarding-feedback")).toBeInTheDocument();
expect(await screen.queryAllByTestId("user-onboarding-task")).toHaveLength(2);
});
});