From 36cd22663a8c4eb2a526b28f64105c4c14647636 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 6 Nov 2017 18:02:50 +0000
Subject: [PATCH 1/5] Open group settings when the group is created

---
 src/components/structures/GroupView.js            | 9 +++++++--
 src/components/structures/LoggedInView.js         | 1 +
 src/components/structures/MatrixChat.js           | 5 ++++-
 src/components/views/dialogs/CreateGroupDialog.js | 1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 24aa552890..88d10573cf 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -392,6 +392,8 @@ export default React.createClass({
 
     propTypes: {
         groupId: PropTypes.string.isRequired,
+        // Whether this is the first time the group admin is viewing the group
+        groupIsNew: PropTypes.bool,
     },
 
     childContextTypes: {
@@ -422,7 +424,7 @@ export default React.createClass({
 
     componentWillMount: function() {
         this._changeAvatarComponent = null;
-        this._initGroupStore(this.props.groupId);
+        this._initGroupStore(this.props.groupId, true);
 
         MatrixClientPeg.get().on("Group.myMembership", this._onGroupMyMembership);
     },
@@ -449,7 +451,7 @@ export default React.createClass({
         this.setState({membershipBusy: false});
     },
 
-    _initGroupStore: function(groupId) {
+    _initGroupStore: function(groupId, firstInit) {
         this._groupStore = GroupStoreCache.getGroupStore(MatrixClientPeg.get(), groupId);
         this._groupStore.registerListener(() => {
             const summary = this._groupStore.getSummary();
@@ -472,6 +474,9 @@ export default React.createClass({
                 ),
                 error: null,
             });
+            if (this.props.groupIsNew && firstInit) {
+                this._onEditClick();
+            }
         });
         this._groupStore.on('error', (err) => {
             this.setState({
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 5d1d47c5b2..08120d9508 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -301,6 +301,7 @@ export default React.createClass({
             case PageTypes.GroupView:
                 page_element = <GroupView
                     groupId={this.props.currentGroupId}
+                    isNew={this.props.currentGroupIsNew}
                     collapsedRhs={this.props.collapseRhs}
                 />;
                 if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index e679276a08..e8ca8e82fc 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -490,7 +490,10 @@ module.exports = React.createClass({
             case 'view_group':
                 {
                     const groupId = payload.group_id;
-                    this.setState({currentGroupId: groupId});
+                    this.setState({
+                        currentGroupId: groupId,
+                        currentGroupIsNew: payload.group_is_new,
+                    });
                     this._setPage(PageTypes.GroupView);
                     this.notifyNewScreen('group/' + groupId);
                 }
diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index e1dfe388d6..168fe75947 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -81,6 +81,7 @@ export default React.createClass({
             dis.dispatch({
                 action: 'view_group',
                 group_id: result.group_id,
+                group_is_new: true,
             });
             this.props.onFinished(true);
         }).catch((e) => {

From 137f1311b3bc2889732879b1ad40ef611e18cedd Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 6 Nov 2017 18:03:00 +0000
Subject: [PATCH 2/5] Add useful placeholder for the long description textarea

---
 src/components/structures/GroupView.js | 10 ++++++++++
 src/i18n/strings/en_EN.json            |  1 +
 2 files changed, 11 insertions(+)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 88d10573cf..a76d825451 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -867,6 +867,16 @@ export default React.createClass({
                 <h3> { _t("Long Description (HTML)") } </h3>
                 <textarea
                     value={this.state.profileForm.long_description}
+                    placeholder={_t(
+                        '<h1>HTML for your community\'s page</h1>\n' +
+                        '<p>\n' +
+                        '    Use the Long Description to introduce ' +
+                        'new members to the community, or distribute ' +
+                        'some important <a href="https://about.riot.im">links</a>.\n' +
+                        '</p> \n' +
+                        '<p> \n' +
+                        '    You can even use "img" tags, but only for images reachable from MXC URLs.\n' +
+                        '</p>\n')}
                     onChange={this._onLongDescChange}
                     tabIndex="4"
                     key="editLongDesc"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 83211f6e27..e52220bb8c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -703,6 +703,7 @@
     "Community Member Settings": "Community Member Settings",
     "Publish this community on your profile": "Publish this community on your profile",
     "Long Description (HTML)": "Long Description (HTML)",
+    "<h1>HTML for your community's page</h1>\n<p>\n    Use the Long Description to introduce new members to the community, or distribute some important <a href=\"https://about.riot.im\">links</a>.\n</p> \n<p> \n    You can even use \"img\" tags, but only for images reachable from MXC URLs.\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the Long Description to introduce new members to the community, or distribute some important <a href=\"https://about.riot.im\">links</a>.\n</p> \n<p> \n    You can even use \"img\" tags, but only for images reachable from MXC URLs.\n</p>\n",
     "Description": "Description",
     "Community %(groupId)s not found": "Community %(groupId)s not found",
     "This Home server does not support communities": "This Home server does not support communities",

From 477051cfa66b158656b6846501c3c5d8f40a1211 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 6 Nov 2017 18:35:52 +0000
Subject: [PATCH 3/5] Add placeholder for when a long desc hasn't been set

this is only visible to group admins.
---
 src/components/structures/GroupView.js | 14 +++++++++++++-
 src/i18n/strings/en_EN.json            |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index a76d825451..1721a8b73b 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -22,7 +22,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
-import { _t } from '../../languageHandler';
+import { _t, _tJsx } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import Modal from '../../Modal';
 import classnames from 'classnames';
@@ -856,6 +856,18 @@ export default React.createClass({
         let description = null;
         if (summary.profile && summary.profile.long_description) {
             description = sanitizedHtmlNode(summary.profile.long_description);
+        } else if (this.state.isUserPrivileged) {
+            description = <div
+                className="mx_GroupView_groupDesc_placeholder"
+                onClick={this._onEditClick}
+            >
+                { _tJsx(
+                    'Your community hasn\'t got a Long Description, a HTML page to show to community members.<br />' +
+                    'Click here to open settings and give it one!',
+                    [/<br \/>/],
+                    [(sub) => <br />])
+                }
+            </div>;
         }
         const groupDescEditingClasses = classnames({
             "mx_GroupView_groupDesc": true,
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e52220bb8c..99eca338fc 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -702,6 +702,7 @@
     "You are a member of this community": "You are a member of this community",
     "Community Member Settings": "Community Member Settings",
     "Publish this community on your profile": "Publish this community on your profile",
+    "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!",
     "Long Description (HTML)": "Long Description (HTML)",
     "<h1>HTML for your community's page</h1>\n<p>\n    Use the Long Description to introduce new members to the community, or distribute some important <a href=\"https://about.riot.im\">links</a>.\n</p> \n<p> \n    You can even use \"img\" tags, but only for images reachable from MXC URLs.\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the Long Description to introduce new members to the community, or distribute some important <a href=\"https://about.riot.im\">links</a>.\n</p> \n<p> \n    You can even use \"img\" tags, but only for images reachable from MXC URLs.\n</p>\n",
     "Description": "Description",

From 956c5ff34384d7e8f9d542c68921897aaf7cd173 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Mon, 6 Nov 2017 18:52:55 +0000
Subject: [PATCH 4/5] Use a constant for easy reading of long desc placeholder

---
 src/components/structures/GroupView.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 1721a8b73b..1728bc3c71 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -22,7 +22,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
-import { _t, _tJsx } from '../../languageHandler';
+import { _t, _td, _tJsx } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import Modal from '../../Modal';
 import classnames from 'classnames';
@@ -32,6 +32,17 @@ import GroupStore from '../../stores/GroupStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 
+const LONG_DESC_PLACEHOLDER = _td(`
+<h1>HTML for your community's page</h1>
+<p>
+    Use the long description to introduce new members to the community, or distribute
+    some important <a href="foo">links</a>
+</p>
+<p>
+    You can even use 'img' tags
+</p>
+`);
+
 const RoomSummaryType = PropTypes.shape({
     room_id: PropTypes.string.isRequired,
     profile: PropTypes.shape({
@@ -879,16 +890,7 @@ export default React.createClass({
                 <h3> { _t("Long Description (HTML)") } </h3>
                 <textarea
                     value={this.state.profileForm.long_description}
-                    placeholder={_t(
-                        '<h1>HTML for your community\'s page</h1>\n' +
-                        '<p>\n' +
-                        '    Use the Long Description to introduce ' +
-                        'new members to the community, or distribute ' +
-                        'some important <a href="https://about.riot.im">links</a>.\n' +
-                        '</p> \n' +
-                        '<p> \n' +
-                        '    You can even use "img" tags, but only for images reachable from MXC URLs.\n' +
-                        '</p>\n')}
+                    placeholder={_t(LONG_DESC_PLACEHOLDER)}
                     onChange={this._onLongDescChange}
                     tabIndex="4"
                     key="editLongDesc"

From 9019fee49e8ed2390ed39a6746b1ddb36d6bedcb Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Tue, 7 Nov 2017 10:47:32 +0000
Subject: [PATCH 5/5] Adjust long desc placeholder text

---
 src/components/structures/GroupView.js | 4 ++--
 src/i18n/strings/en_EN.json            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 1728bc3c71..de6fc53f32 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -32,8 +32,8 @@ import GroupStore from '../../stores/GroupStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 
-const LONG_DESC_PLACEHOLDER = _td(`
-<h1>HTML for your community's page</h1>
+const LONG_DESC_PLACEHOLDER = _td(
+`<h1>HTML for your community's page</h1>
 <p>
     Use the long description to introduce new members to the community, or distribute
     some important <a href="foo">links</a>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 99eca338fc..cc20f3b89b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -672,6 +672,7 @@
     "You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
     "You must join the room to see its files": "You must join the room to see its files",
     "There are no visible files in this room": "There are no visible files in this room",
+    "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n",
     "Add rooms to the community summary": "Add rooms to the community summary",
     "Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
     "Add to summary": "Add to summary",
@@ -704,7 +705,6 @@
     "Publish this community on your profile": "Publish this community on your profile",
     "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!",
     "Long Description (HTML)": "Long Description (HTML)",
-    "<h1>HTML for your community's page</h1>\n<p>\n    Use the Long Description to introduce new members to the community, or distribute some important <a href=\"https://about.riot.im\">links</a>.\n</p> \n<p> \n    You can even use \"img\" tags, but only for images reachable from MXC URLs.\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the Long Description to introduce new members to the community, or distribute some important <a href=\"https://about.riot.im\">links</a>.\n</p> \n<p> \n    You can even use \"img\" tags, but only for images reachable from MXC URLs.\n</p>\n",
     "Description": "Description",
     "Community %(groupId)s not found": "Community %(groupId)s not found",
     "This Home server does not support communities": "This Home server does not support communities",