Merge pull request #6013 from matrix-org/t3chguy/fix/17238

[Release] Add feedback mechanism for beta features, namely Spaces

res/css/_components.scss

@@ -63,6 +63,7 @@
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_BetaFeedbackDialog.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";

res/css/structures/_SpaceRoomView.scss

@@ -93,6 +93,10 @@ $SpaceRoomViewInnerWidth: 428px;
             }
         }
 
+        &:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt {
+            width: $SpaceRoomViewInnerWidth;
+        }
+
         .mx_SpaceRoomView_buttons {
             display: block;
             margin-top: 44px;
@@ -335,10 +339,19 @@ $SpaceRoomViewInnerWidth: 428px;
         .mx_SearchBox {
             margin: 0 0 20px;
         }
+
+        .mx_SpaceFeedbackPrompt {
+            margin-bottom: 16px;
+
+            // hide the HR as we have our own
+            & + hr {
+                display: none;
+            }
+        }
     }
 
     .mx_SpaceRoomView_privateScope {
-        .mx_AccessibleButton {
+        > .mx_AccessibleButton {
             @mixin SpacePillButton;
         }
 
@@ -450,3 +463,66 @@ $SpaceRoomViewInnerWidth: 428px;
         }
     }
 }
+
+.mx_SpaceFeedbackPrompt {
+    margin-top: 18px;
+    margin-bottom: 12px;
+
+    > hr {
+        border: none;
+        border-top: 1px solid $input-border-color;
+        margin-bottom: 12px;
+    }
+
+    > div {
+        display: flex;
+        flex-direction: row;
+        font-size: $font-15px;
+        line-height: $font-24px;
+
+        > span {
+            color: $secondary-fg-color;
+            position: relative;
+            padding-left: 32px;
+            font-size: inherit;
+            line-height: inherit;
+            margin-right: auto;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 2px;
+                height: 20px;
+                width: 20px;
+                background-color: $secondary-fg-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+                mask-position: center;
+            }
+        }
+
+        .mx_AccessibleButton_kind_link {
+            color: $accent-color;
+            position: relative;
+            padding: 0 0 0 24px;
+            margin-left: 8px;
+            font-size: inherit;
+            line-height: inherit;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                height: 16px;
+                width: 16px;
+                background-color: $accent-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
+                mask-position: center;
+            }
+        }
+    }
+}

res/css/views/beta/_BetaCard.scss

@@ -39,19 +39,21 @@ limitations under the License.
             font-size: $font-15px;
             line-height: $font-20px;
             color: $secondary-fg-color;
+            margin-bottom: 20px;
         }
 
         .mx_AccessibleButton {
             display: block;
-            margin: 20px 0;
-            padding: 12px 40px;
-            width: max-content;
+            margin: 12px 0;
+            padding: 7px 40px;
+            width: auto;
         }
 
         .mx_BetaCard_disclaimer {
             font-size: $font-12px;
             line-height: $font-15px;
             color: $secondary-fg-color;
+            margin-top: 20px;
         }
     }
 

res/css/views/dialogs/_BetaFeedbackDialog.scss

@@ -0,0 +1,30 @@
+/*
+Copyright 2021 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_BetaFeedbackDialog {
+    .mx_BetaFeedbackDialog_subheading {
+        color: $secondary-fg-color;
+        font-size: $font-14px;
+        line-height: $font-20px;
+        margin-bottom: 24px;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+        font-size: inherit;
+        line-height: inherit;
+    }
+}

src/components/structures/SpaceRoomDirectory.tsx

@@ -574,7 +574,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
     return <>
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Search names and description") }
+            placeholder={ _t("Search names and descriptions") }
             onSearch={setQuery}
             autoFocus={true}
             initialValue={initialText}

src/components/structures/SpaceRoomView.tsx

@@ -64,6 +64,9 @@ import {BetaPill} from "../views/beta/BetaCard";
 import {USER_LABS_TAB} from "../views/dialogs/UserSettingsDialog";
 import SettingsStore from "../../settings/SettingsStore";
 import dis from "../../dispatcher/dispatcher";
+import Modal from "../../Modal";
+import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
+import SdkConfig from "../../SdkConfig";
 
 interface IProps {
     space: Room;
@@ -89,6 +92,26 @@ enum Phase {
     PrivateExistingRooms,
 }
 
+// XXX: Temporary for the Spaces Beta only
+export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
+    if (!SdkConfig.get().bug_report_endpoint_url) return null;
+
+    return <div className="mx_SpaceFeedbackPrompt">
+        <hr />
+        <div>
+            <span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a beta feature.") }</span>
+            <AccessibleButton kind="link" onClick={() => {
+                if (onClick) onClick();
+                Modal.createTrackedDialog("Beta Feedback", "feature_spaces", BetaFeedbackDialog, {
+                    featureId: "feature_spaces",
+                });
+            }}>
+                { _t("Feedback") }
+            </AccessibleButton>
+        </div>
+    </div>;
+};
+
 const RoomMemberCount = ({ room, children }) => {
     const members = useRoomMembers(room);
     const count = members.length;
@@ -398,6 +421,7 @@ const SpaceLanding = ({ space }) => {
         <div className="mx_SpaceRoomView_landing_topic">
             <RoomTopic room={space} />
         </div>
+        <SpaceFeedbackPrompt />
         <hr />
 
         <SpaceHierarchy
@@ -487,6 +511,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
                 value={buttonLabel}
             />
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
@@ -555,6 +580,7 @@ const SpaceAddExistingRooms = ({ space, onFinished }) => {
                 { buttonLabel }
             </AccessibleButton>
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
@@ -574,6 +600,7 @@ const SpaceSetupPublicShare = ({ justCreatedOpts, space, onFinished }) => {
                 { _t("Go to my first room") }
             </AccessibleButton>
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
@@ -600,6 +627,7 @@ const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
             <h3>{ _t("Me and my teammates") }</h3>
             <div>{ _t("A private space for you and your teammates") }</div>
         </AccessibleButton>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 
@@ -721,6 +749,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
                 value={buttonLabel}
             />
         </div>
+        <SpaceFeedbackPrompt />
     </div>;
 };
 

src/components/views/beta/BetaCard.tsx

@@ -22,6 +22,9 @@ import AccessibleButton from "../elements/AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
 import {SettingLevel} from "../../../settings/SettingLevel";
 import TextWithTooltip from "../elements/TextWithTooltip";
+import Modal from "../../../Modal";
+import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
+import SdkConfig from "../../../SdkConfig";
 
 interface IProps {
     title?: string;
@@ -63,22 +66,37 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     const info = SettingsStore.getBetaInfo(featureId);
     if (!info) return null; // Beta is invalid/disabled
 
-    const { title, caption, disclaimer, image } = info;
+    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading } = info;
     const value = SettingsStore.getValue(featureId);
 
+    let feedbackButton;
+    if (value && feedbackLabel && feedbackSubheading && SdkConfig.get().bug_report_endpoint_url) {
+        feedbackButton = <AccessibleButton
+            onClick={() => {
+                Modal.createTrackedDialog("Beta Feedback", featureId, BetaFeedbackDialog, { featureId });
+            }}
+            kind="primary"
+        >
+            { _t("Feedback") }
+        </AccessibleButton>;
+    }
+
     return <div className="mx_BetaCard">
         <div>
             <h3 className="mx_BetaCard_title">
                 { titleOverride || _t(title) }
                 <BetaPill />
             </h3>
             <span className="mx_BetaCard_caption">{ _t(caption) }</span>
-            <AccessibleButton
-                onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
-                kind="primary"
-            >
-                { value ? _t("Leave the beta") : _t("Join the beta") }
-            </AccessibleButton>
+            <div>
+                { feedbackButton }
+                <AccessibleButton
+                    onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
+                    kind={feedbackButton ? "primary_outline" : "primary"}
+                >
+                    { value ? _t("Leave the beta") : _t("Join the beta") }
+                </AccessibleButton>
+            </div>
             { disclaimer && <div className="mx_BetaCard_disclaimer">
                 { disclaimer(value) }
             </div> }

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -36,6 +36,7 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
+import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -307,6 +308,7 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
         <div className="mx_AddExistingToSpaceDialog_footer">
             { footer }
         </div>
+        <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
     </BaseDialog>;
 };