FEATURE: Show empty state when a user has no joinable channels (#515)

FEATURE: Show empty state when a user has no joinable channels (#515)

And also extract channel browsing tests into their own file

diff --git a/assets/javascripts/discourse/templates/chat-browse.hbs b/assets/javascripts/discourse/templates/chat-browse.hbs
index b620f38..6dd32d9 100644
--- a/assets/javascripts/discourse/templates/chat-browse.hbs
+++ b/assets/javascripts/discourse/templates/chat-browse.hbs
@@ -5,13 +5,15 @@
         {{chat-channel-settings-row channel=channel categoryChannel=true}}
       {{/each}}
     </div>
-  {{/if}}
 
-  {{#if model.topicChannels}}
+  {{else if model.topicChannels}}
     <div class="topic-channels">
       {{#each model.topicChannels as |channel|}}
         {{chat-channel-settings-row channel=channel}}
       {{/each}}
     </div>
+
+  {{else}}
+    <EmptyState @title={{i18n "chat.no_joinable_channels_title"}} @body={{i18n "chat.no_joinable_channels_body"}} />
   {{/if}}
 </div>
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 25ee03b..3d80de4 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -54,6 +54,8 @@ en:
           other: "%{usernames} have not joined this channel."
 
       no_public_channels: "You have not joined any channels."
+      no_joinable_channels_title: "There are no channels for you to join yet."
+      no_joinable_channels_body: "You can reach out to your administrator to start enabling chat for topics or categories."
       only_chat_push_notifications:
         title: "Only send chat push notifications"
         description: "Block all non-chat push notifications from being sent"
diff --git a/test/javascripts/acceptance/chat-browse-test.js b/test/javascripts/acceptance/chat-browse-test.js
new file mode 100644
index 0000000..4abf3d7
--- /dev/null
+++ b/test/javascripts/acceptance/chat-browse-test.js
@@ -0,0 +1,156 @@
+import {
+  acceptance,
+  exists,
+  query,
+  updateCurrentUser,
+  visible,
+} from "discourse/tests/helpers/qunit-helpers";
+import { click, visit } from "@ember/test-helpers";
+import { test } from "qunit";
+
+acceptance("Discourse Chat - chat browsing", function (needs) {
+  const editedChannelName = "this is an edit test!";
+
+  needs.user({
+    admin: true,
+    moderator: true,
+    username: "eviltrout",
+    id: 1,
+    can_chat: true,
+    has_chat_enabled: true,
+  });
+  needs.settings({
+    chat_enabled: true,
+  });
+  needs.pretender((server, helper) => {
+    server.get("/chat/chat_channels/all.json", () => {
+      return helper.response([
+        {
+          id: 1,
+          chatable_id: 1,
+          chatable_type: "Category",
+          chatable: {},
+          following: true,
+        },
+      ]);
+    });
+
+    server.get("/chat/chat_channels.json", () =>
+      helper.response({
+        public_channels: [],
+        direct_message_channels: [],
+      })
+    );
+
+    server.post("/chat/chat_channels/:chatChannelId/unfollow", () => {
+      return helper.response({ success: "OK" });
+    });
+    server.post("/chat/chat_channels/:chat_channel_id", () => {
+      return helper.response({
+        chat_channel: {
+          title: editedChannelName,
+        },
+      });
+    });
+  });
+
+  test("Chat browse controls", async function (assert) {
+    await visit("/chat/browse");
+    const settingsRow = query(".chat-channel-settings-row");
+    assert.ok(
+      settingsRow.querySelector(".chat-channel-expand-settings"),
+      "Expand notifications button is present"
+    );
+    assert.ok(
+      settingsRow.querySelector(".chat-channel-unfollow"),
+      "Unfollow button is present"
+    );
+    await click(".chat-channel-expand-settings");
+    assert.ok(exists(".chat-channel-row-controls"), "Controls are present");
+
+    await click(".chat-channel-unfollow");
+    assert.notOk(
+      settingsRow.querySelector(".chat-channel-expand-settings"),
+      "Expand notifications button is gone"
+    );
+    assert.notOk(
+      settingsRow.querySelector(".chat-channel-unfollow"),
+      "Unfollow button is gone"
+    );
+
+    assert.ok(
+      settingsRow.querySelector(".chat-channel-preview"),
+      "Preview channel button is present"
+    );
+    assert.ok(
+      settingsRow.querySelector(".chat-channel-follow"),
+      "Follow button is present"
+    );
+  });
+
+  test("Chat browse - edit name is present for staff", async function (assert) {
+    updateCurrentUser({ admin: true, moderator: true });
+    await visit("/chat/browse");
+    const settingsRow = query(".chat-channel-settings-row");
+    await click(
+      settingsRow.querySelector(".channel-title-container .edit-btn")
+    );
+    assert.ok(exists(".channel-name-edit-container"));
+    await fillIn(".channel-name-edit-container .name-input", editedChannelName);
+    await click(
+      settingsRow.querySelector(".channel-name-edit-container .save-btn")
+    );
+    assert.equal(
+      settingsRow.querySelector(".chat-channel-title").innerText.trim(),
+      editedChannelName
+    );
+  });
+
+  test("Chat browse - edit name is hidden for normal user", async function (assert) {
+    updateCurrentUser({ admin: false, moderator: false });
+    await visit("/chat/browse");
+    assert.notOk(
+      exists(".chat-channel-settings-row .channel-title-container .edit-btn")
+    );
+  });
+});
+
+acceptance("Discourse Chat - chat browsing no channels", function (needs) {
+  needs.user({
+    admin: true,
+    moderator: true,
+    username: "eviltrout",
+    id: 1,
+    can_chat: true,
+    has_chat_enabled: true,
+  });
+  needs.settings({
+    chat_enabled: true,
+  });
+  needs.pretender((server, helper) => {
+    server.get("/chat/chat_channels/all.json", () => {
+      return helper.response([]);
+    });
+
+    server.get("/chat/chat_channels.json", () =>
+      helper.response({
+        public_channels: [],
+        direct_message_channels: [],
+      })
+    );
+  });
+
+  test("Chat browsing shows no channels", async function (assert) {
+    await visit("/chat/browse");
+    assert.notOk(visible(".chat-channel-settings-row"));
+
+    assert.equal(
+      query(".empty-state-title").innerText,
+      "There are no channels for you to join yet."
+    );
+    assert.equal(
+      query(".empty-state-body").innerText,
+      "You can reach out to your administrator to start enabling chat for topics or categories."
+    );
+  });
+});
diff --git a/test/javascripts/acceptance/chat-test.js b/test/javascripts/acceptance/chat-test.js
index cf9f5b7..910c97c 100644
--- a/test/javascripts/acceptance/chat-test.js
+++ b/test/javascripts/acceptance/chat-test.js
@@ -1021,7 +1021,6 @@ acceptance(
   }
 );
 
-const editedChannelName = "this is an edit test!";
 acceptance(
   "Discourse Chat - chat channel settings and creation",
   function (needs) {
@@ -1038,21 +1037,13 @@ acceptance(
     });
     needs.pretender((server, helper) => {
       baseChatPretenders(server, helper);
-      siteChannelPretender(server, helper);
-      directMessageChannelPretender(server, helper);
       chatChannelPretender(server, helper);
       server.get("/chat/chat_channels/all.json", () => {
         return helper.response(allChannels());
       });
-      server.post("/chat/chat_channels/:chatChannelId/unfollow", () => {
-        return helper.response({ success: "OK" });
-      });
       server.get("/chat/chat_channels/:chatChannelId", () => {
         return helper.response(siteChannel);
       });
-      server.post("/chat/chat_channels/:chatChannelId/follow", () => {
-        return helper.response(siteChannel.chat_channel);
-      });
       server.put("/chat/chat_channels", () => {
         return helper.response({
           chat_channel: {
@@ -1069,23 +1060,6 @@ acceptance(
           },
         });
       });
-      server.post("/chat/chat_channels/:chat_channel_id", () => {
-        return helper.response({
-          chat_channel: {
-            chat_channels: [],
-            chatable: {},
-            chatable_id: 16,
-            chatable_type: "Category",
-            chatable_url: null,
-            id: 75,
-            last_read_message_id: null,

[... diff too long, it was truncated ...]

GitHub sha: 2bbb53bc25f53f20deca741de56c5a7a2ff54c3d

This commit appears in #515 which was approved by martin. It was merged by nattsw.