Iterate PR based on feedback

res/css/structures/_GroupView.scss

@@ -400,7 +400,11 @@ limitations under the License.
         background-color: $secondary-fg-color;
     }
 
-    .mx_AccessibleButton {
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
+
+    .mx_GroupView_spaceUpgradePrompt_close {
         width: 16px;
         height: 16px;
         border-radius: 8px;

res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss

@@ -59,6 +59,10 @@ limitations under the License.
         .mx_JoinRuleDropdown .mx_Dropdown_menu {
             width: auto !important; // override fixed width
         }
+
+        .mx_CreateSpaceFromCommunityDialog_nonPublicSpacer {
+            height: 63px; // balance the height of the missing room alias field to prevent modal bouncing
+        }
     }
 
     .mx_CreateSpaceFromCommunityDialog_footer {

src/components/structures/GroupView.js

@@ -41,6 +41,9 @@ import RightPanelStore from "../../stores/RightPanelStore";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { mediaFromMxc } from "../../customisations/Media";
 import { replaceableComponent } from "../../utils/replaceableComponent";
+import { createSpaceFromCommunity } from "../../utils/space";
+import { Action } from "../../dispatcher/actions";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
 
 const LONG_DESC_PLACEHOLDER = _td(
     `<h1>HTML for your community's page</h1>
@@ -815,6 +818,17 @@ export default class GroupView extends React.Component {
         this.setState({ showUpgradeNotice: false });
     }
 
+    _onCreateSpaceClick = () => {
+        createSpaceFromCommunity(this._matrixClient, this.props.groupId);
+    };
+
+    _onAdminsLinkClick = () => {
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.GroupMemberList,
+        });
+    };
+
     _getGroupSection() {
         const groupSettingsSectionClasses = classnames({
             "mx_GroupView_group": this.state.editing,
@@ -854,17 +868,35 @@ export default class GroupView extends React.Component {
 
         let communitiesUpgradeNotice;
         if (this.state.showUpgradeNotice) {
+            let text;
+            if (this.state.isUserPrivileged) {
+                text = _t("You can create a Space from this community <a>here</a>.", {}, {
+                    a: sub => <AccessibleButton onClick={this._onCreateSpaceClick} kind="link">
+                        { sub }
+                    </AccessibleButton>,
+                });
+            } else {
+                text = _t("Ask the <a>admins</a> of this community to make it into a Space " +
+                    "and keep a look out for the invite.", {}, {
+                    a: sub => <AccessibleButton onClick={this._onAdminsLinkClick} kind="link">
+                        { sub }
+                    </AccessibleButton>,
+                });
+            }
+
             communitiesUpgradeNotice = <div className="mx_GroupView_spaceUpgradePrompt">
                 <h2>{ _t("Communities can now be made into Spaces") }</h2>
                 <p>
                     { _t("Spaces are a new way to make a community, with new features coming.") }
                     &nbsp;
-                    { _t("Ask the admins of this community to make it into a Space " +
-                        "and keep a look out for the invite.") }
+                    { text }
                     &nbsp;
                     { _t("Communities won't receive further updates.") }
                 </p>
-                <AccessibleButton onClick={this._dismissUpgradeNotice} />
+                <AccessibleButton
+                    className="mx_GroupView_spaceUpgradePrompt_close"
+                    onClick={this._dismissUpgradeNotice}
+                />
             </div>;
         }
 

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -286,8 +286,6 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
     >
         <div className="mx_CreateSpaceFromCommunityDialog_content">
             <p>
-                { _t("Spaces are the new version of communities - with new features coming.") }
-                &nbsp;
                 { _t("A link to the Space will be put in your community description.") }
                 &nbsp;
                 { _t("All rooms will be added and all community members will be invited.") }
@@ -326,6 +324,9 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
                     ? _t("Open space for anyone, best for communities")
                     : _t("Invite only, best for yourself or teams")
                 }</p>
+                { joinRule !== JoinRule.Public &&
+                    <div className="mx_CreateSpaceFromCommunityDialog_nonPublicSpacer" />
+                }
             </SpaceCreateForm>
         </div>
 

src/i18n/strings/en_EN.json

@@ -2237,7 +2237,6 @@
     "To create a Space from another community, just pick the community in Preferences.": "To create a Space from another community, just pick the community in Preferences.",
     "Failed to migrate community": "Failed to migrate community",
     "Create Space from community": "Create Space from community",
-    "Spaces are the new version of communities - with new features coming.": "Spaces are the new version of communities - with new features coming.",
     "A link to the Space will be put in your community description.": "A link to the Space will be put in your community description.",
     "All rooms will be added and all community members will be invited.": "All rooms will be added and all community members will be invited.",
     "Flair won't be available in Spaces for the foreseeable future.": "Flair won't be available in Spaces for the foreseeable future.",
@@ -2727,9 +2726,10 @@
     "Community Settings": "Community Settings",
     "Want more than a community? <a>Get your own server</a>": "Want more than a community? <a>Get your own server</a>",
     "Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.": "Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.",
+    "You can create a Space from this community <a>here</a>.": "You can create a Space from this community <a>here</a>.",
+    "Ask the <a>admins</a> of this community to make it into a Space and keep a look out for the invite.": "Ask the <a>admins</a> of this community to make it into a Space and keep a look out for the invite.",
     "Communities can now be made into Spaces": "Communities can now be made into Spaces",
     "Spaces are a new way to make a community, with new features coming.": "Spaces are a new way to make a community, with new features coming.",
-    "Ask the admins of this community to make it into a Space and keep a look out for the invite.": "Ask the admins of this community to make it into a Space and keep a look out for the invite.",
     "Communities won't receive further updates.": "Communities won't receive further updates.",
     "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.": "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.",
     "Featured Rooms:": "Featured Rooms:",