From 7728462fb11eb0633b4935b592b6d8e617e1d5bf Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Wed, 20 Nov 2019 22:44:24 +0800
Subject: [PATCH 1/4] feat(clients): add edit client entry

---
 .yarnclean                                 | 45 ++++++++++++++++++++
 main/updateChecker.ts                      |  2 +-
 package.json                               |  2 +-
 src/assets/scss/element/element-reset.scss |  3 ++
 src/assets/scss/theme/dark.scss            |  1 +
 src/assets/scss/theme/light.scss           |  1 +
 src/assets/scss/theme/purple.scss          |  1 +
 src/lang/brokers.ts                        |  4 ++
 src/lang/common.ts                         |  8 ++++
 src/views/brokers/BrokerContent.vue        | 48 +++++++++++++++++-----
 src/views/brokers/clients/ClientCreate.vue | 32 ++++++++++++++-
 src/views/settings/SettingsLeft.vue        |  2 +-
 12 files changed, 133 insertions(+), 16 deletions(-)
 create mode 100644 .yarnclean

diff --git a/.yarnclean b/.yarnclean
new file mode 100644
index 000000000..b591611ea
--- /dev/null
+++ b/.yarnclean
@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
diff --git a/main/updateChecker.ts b/main/updateChecker.ts
index e5d47520c..a99f83bc8 100644
--- a/main/updateChecker.ts
+++ b/main/updateChecker.ts
@@ -1,7 +1,7 @@
 import { dialog, shell } from 'electron'
 import axios from 'axios'
 
-const version: string = 'v1.1.0'
+const version: string = 'v1.1.1'
 const release: string = 'https://api.github.com/repos/emqx/MQTTX/releases/latest'
 const downloadUrl: string = 'https://github.com/emqx/MQTTX/releases/latest'
 
diff --git a/package.json b/package.json
index d2f177448..d7e8fac34 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "MQTTX",
   "author": "EMQ X Team",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "Apache",
   "description": "MQTT desktop client",
   "repository": "https://github.com/emqx/MQTTX",
diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss
index 333cdd796..4a068bcaa 100644
--- a/src/assets/scss/element/element-reset.scss
+++ b/src/assets/scss/element/element-reset.scss
@@ -29,6 +29,9 @@
   border: 1px solid var(--color-border-default);
   background-color: var(--color-bg-normal);
 }
+.el-card.is-hover-shadow:hover {
+  box-shadow: 0 2px 12px 0 var(--color-shadow-card);
+}
 
 /* Form */
 .el-form {
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 8717bd259..c5c021a55 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -29,4 +29,5 @@ body.dark {
   /* Border color */
   --color-border-default: #383838;
   --color-border-bold: #969696;
+  --color-shadow-card: #00000059;
 }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index a914bc4d6..db6642e19 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -29,4 +29,5 @@ body.light {
   /* Border color */
   --color-border-default: #E6E8F1;
   --color-border-bold: #979797;
+  --color-shadow-card: #0000001a;
 }
diff --git a/src/assets/scss/theme/purple.scss b/src/assets/scss/theme/purple.scss
index 9fe8e6ef5..fb63f562b 100644
--- a/src/assets/scss/theme/purple.scss
+++ b/src/assets/scss/theme/purple.scss
@@ -29,4 +29,5 @@ body.purple {
   /* Border color */
   --color-border-default: #40414E;
   --color-border-bold: #4F5367;
+  --color-shadow-card: #00000085;
 }
diff --git a/src/lang/brokers.ts b/src/lang/brokers.ts
index b6789d267..38a9891ef 100644
--- a/src/lang/brokers.ts
+++ b/src/lang/brokers.ts
@@ -44,6 +44,10 @@ export default {
     zh: '新建客户端',
     en: 'New Client',
   },
+  editClient: {
+    zh: '编辑客户端',
+    en: 'Edit Client',
+  },
   username: {
     zh: '用户名',
     en: 'Username',
diff --git a/src/lang/common.ts b/src/lang/common.ts
index a6d387c41..e9d473793 100644
--- a/src/lang/common.ts
+++ b/src/lang/common.ts
@@ -59,4 +59,12 @@ export default {
     zh: '此操作将删除该 {name}，是否继续？',
     en: 'This will delete {name}, Continue?',
   },
+  delete: {
+    zh: '删除',
+    en: 'Delete',
+  },
+  edit: {
+    zh: '编辑',
+    en: 'Edit',
+  },
 }
diff --git a/src/views/brokers/BrokerContent.vue b/src/views/brokers/BrokerContent.vue
index 14f130bda..3a97b546c 100644
--- a/src/views/brokers/BrokerContent.vue
+++ b/src/views/brokers/BrokerContent.vue
@@ -65,10 +65,22 @@
     </div>
     <el-row :gutter="10">
       <el-col v-for="client in clients" :key="client.id" :span="12">
-        <el-card shadow="never" class="item-card client-card">
-          <a class="remove-icon" href="javascript:;" @click="removeClient(client)">
-            <i class="el-icon-close"></i>
-          </a>
+        <el-card shadow="hover" class="item-card client-card">
+          <el-dropdown class="oper-dropdown" trigger="click" @command="handleCommand">
+            <a class="oper-icon" href="javascript:;">
+              <i class="el-icon-more"></i>
+            </a>
+            <el-dropdown-menu slot="dropdown">
+              <a class="dropdown-clients-item" href="javascript:;" @click="editClient(client)">
+                <i class="el-icon-edit"></i>
+                {{ $t('common.edit') }}
+              </a>
+              <a class="dropdown-clients-item" href="javascript:;" @click="removeClient(client)">
+                <i class="el-icon-delete"></i>
+                {{ $t('common.delete') }}
+              </a>
+            </el-dropdown-menu>
+          </el-dropdown>
           <el-form label-suffix=":">
             <el-form-item :label="$t('brokers.clientName')">
               <span>{{ client.clientName }}</span>
@@ -104,6 +116,13 @@ export default class BrokerContent extends Vue {
     }
   }
 
+  private editClient(row: ClientModel): void {
+    this.$router.push({
+      path: `/clients/${this.record.id}`,
+      query: { oper: 'edit', clientId: row.id },
+    })
+  }
+
   private removeClient(row: ClientModel): void {
     const confirmDelete: string = this.$t('common.confirmDelete', { name: row.clientName }) as string
     this.$confirm(confirmDelete, this.$t('common.warning') as string, {
@@ -147,17 +166,24 @@ export default class BrokerContent extends Vue {
   .client-card {
     margin: 10px 5px 10px 0px;
     cursor: pointer;
-    .remove-icon {
+    .oper-dropdown {
       position: absolute;
       right: 10px;
-      top: 5px;
-      visibility: hidden;
-    }
-    &:hover {
-      .remove-icon {
-        visibility: visible;
+      top: 8px;
+      .oper-icon {
+        display: inline-block;
+        transform: rotate(90deg);
       }
     }
   }
 }
+.dropdown-clients-item {
+  display: block;
+  text-align: left;
+  padding: 5px 16px;
+  min-width: 85px;
+  i {
+    margin-right: 8px;
+  }
+}
 </style>
diff --git a/src/views/brokers/clients/ClientCreate.vue b/src/views/brokers/clients/ClientCreate.vue
index bac492771..420dac07e 100644
--- a/src/views/brokers/clients/ClientCreate.vue
+++ b/src/views/brokers/clients/ClientCreate.vue
@@ -8,7 +8,7 @@
           </a>
         </div>
         <div class="client-body">
-          <h2>{{ $t('brokers.newClient') }}</h2>
+          <h2>{{ oper === 'create' ? $t('brokers.newClient') : $t('brokers.editClient') }}</h2>
         </div>
         <div class="client-tail">
           <a href="javascript:;" @click="save">
@@ -157,7 +157,7 @@
 <script lang="ts">
 import { remote } from 'electron'
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { createClient } from '@/utils/api/broker'
+import { createClient, loadClient } from '@/utils/api/broker'
 import getClientId from '@/utils/getClientId'
 import { ClientModel, BrokerModel } from '../types'
 
@@ -180,6 +180,21 @@ export default class ClientCreate extends Vue {
     key: '',
   }
 
+  get oper(): 'create' | 'edit' {
+    if (this.$route.query.oper === 'edit') {
+      return 'edit'
+    }
+    return 'create'
+  }
+
+  get clientId(): string {
+    const clientId: string = this.$route.query.clientId as string
+    if (clientId) {
+      return clientId
+    }
+    return ''
+  }
+
   get vueForm(): VueForm {
     return this.$refs.record as VueForm
   }
@@ -217,6 +232,13 @@ export default class ClientCreate extends Vue {
     })
   }
 
+  private async loadData(): Promise<void> {
+    const res: ClientModel = await loadClient(this.clientId)
+    if (res) {
+      this.record = res
+    }
+  }
+
   private save() {
     this.vueForm.validate(async (valid: boolean) => {
       if (!valid) {
@@ -231,6 +253,12 @@ export default class ClientCreate extends Vue {
       }
     })
   }
+
+  private created(): void {
+    if (this.clientId !== '' && this.oper === 'edit') {
+      this.loadData()
+    }
+  }
   // TODO: Determine whether to save on beforeRouterLeave
 }
 </script>
diff --git a/src/views/settings/SettingsLeft.vue b/src/views/settings/SettingsLeft.vue
index 579395416..a19a1976e 100644
--- a/src/views/settings/SettingsLeft.vue
+++ b/src/views/settings/SettingsLeft.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="settings-left">
     <img class="logo" :src="logo" alt="mqttx">
-    <p class="version">{{ $t('settings.version') }} 1.1.0</p>
+    <p class="version">{{ $t('settings.version') }} 1.1.1</p>
     <a class="update" href="javascript:;" @click="checkUpdate">{{ $t('settings.update') }}</a>
 
     <a

From 5348e4c974e8c5b5dc16bbc0026fdcceee092011 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Thu, 21 Nov 2019 10:33:25 +0800
Subject: [PATCH 2/4] feat(clients): add edit client method

---
 src/datastore/index.ts                        |  2 +-
 src/utils/api/broker.ts                       | 63 +++++++++++++++----
 src/views/brokers/BrokersList.vue             |  2 +-
 .../{ClientCreate.vue => ClientDetail.vue}    | 26 +++++---
 src/views/brokers/index.vue                   |  6 +-
 src/views/connections/ConnectionsList.vue     |  2 +-
 src/views/connections/SubscriptionsList.vue   |  2 +-
 7 files changed, 74 insertions(+), 29 deletions(-)
 rename src/views/brokers/clients/{ClientCreate.vue => ClientDetail.vue} (92%)

diff --git a/src/datastore/index.ts b/src/datastore/index.ts
index cdbebe9ce..9314be818 100644
--- a/src/datastore/index.ts
+++ b/src/datastore/index.ts
@@ -13,7 +13,7 @@ const STORE_PATH: string = APP.getPath('userData')
 
 // In production mode, during the first open application
 // APP.getPath('userData') gets the path nested and the datastore.js is loaded.
-// So if it doesn't exist, create it.
+// if it doesn't exist, create it.
 if (!isRenderer) {
   if (!fs.pathExistsSync(STORE_PATH)) {
     fs.mkdirpSync(STORE_PATH)
diff --git a/src/utils/api/broker.ts b/src/utils/api/broker.ts
index 3f02cbafc..63bd829f5 100644
--- a/src/utils/api/broker.ts
+++ b/src/utils/api/broker.ts
@@ -3,11 +3,18 @@ import { BrokerModel, ClientModel } from '@/views/brokers/types'
 import { ConnectionModel } from '@/views/connections/types'
 import { deleteConnection, updateConnection, loadConnections } from './connection'
 
+type Type = 'broker' | 'client'
+
 interface QueryClient {
   brokeruuid: string
 }
 
-const deleteConnectionList = (id: string, type: 'broker' | 'client'): void => {
+interface Data {
+  brokerData?: BrokerModel,
+  clientData?: ClientModel,
+}
+
+const deleteConnectionList = (id: string, type: Type): void => {
   const uuid = type === 'broker' ? 'brokeruuid' : 'clientuuid'
   const connections: ConnectionModel[] | [] = loadConnections()
   connections.forEach((connection: ConnectionModel) => {
@@ -17,17 +24,38 @@ const deleteConnectionList = (id: string, type: 'broker' | 'client'): void => {
   })
 }
 
-const updateConnectionList = (brokeruuid: string, data: BrokerModel): void => {
+const updateConnectionList = (id: string, type: Type, payload: Data): void => {
+  const uuid = type === 'broker' ? 'brokeruuid' : 'clientuuid'
   const connections: ConnectionModel[] | [] = loadConnections()
-  connections.forEach((connection: ConnectionModel) => {
-    if (connection.brokeruuid === brokeruuid) {
-      connection.host = data.brokerAddress
-      connection.port = data.brokerPort
-      connection.path = data.path
-      connection.ssl = data.tls
-      updateConnection(connection.id as string, connection)
-    }
-  })
+  if (type === 'broker') {
+    const { brokerData } = payload
+    connections.forEach((connection: ConnectionModel) => {
+      if (connection[uuid] === id && brokerData) {
+        connection.host = brokerData.brokerAddress
+        connection.port = brokerData.brokerPort
+        connection.path = brokerData.path
+        connection.ssl = brokerData.tls
+        updateConnection(connection.id as string, connection)
+      }
+    })
+  } else if (type === 'client') {
+    const { clientData } = payload
+    connections.forEach((connection: ConnectionModel) => {
+      if (connection[uuid] === id && clientData) {
+        connection.name = clientData.clientName
+        connection.clientId = clientData.clientId
+        connection.username = clientData.username || ''
+        connection.password = clientData.password || ''
+        connection.keepalive = clientData.keepAlive
+        connection.connectTimeout = clientData.connectionTimeout || 4000
+        connection.clean = clientData.cleanSession
+        connection.ca = clientData.ca
+        connection.cert = clientData.cert
+        connection.key = clientData.key
+        updateConnection(connection.id as string, connection)
+      }
+    })
+  }
 }
 
 export const loadBrokers = (): BrokerModel[] | [] => {
@@ -43,7 +71,8 @@ export const createBroker = (data: BrokerModel): BrokerModel => {
 }
 
 export const updateBroker = (id: string, data: BrokerModel): BrokerModel => {
-  updateConnectionList(id, data)
+  const payload: Data = { brokerData: data }
+  updateConnectionList(id, 'broker', payload)
   return db.update<BrokerModel>('brokers', id, data)
 }
 
@@ -53,7 +82,15 @@ export const deleteBroker = (id: string): BrokerModel => {
   return db.remove<BrokerModel>('brokers', id)
 }
 
-export const updateClient = (id: string, data: ClientModel): ClientModel => {
+export const updateClient = (
+  id: string,
+  data: ClientModel,
+  updateConnect: boolean = false,
+): ClientModel => {
+  if (updateConnect) {
+    const payload = { clientData: data }
+    updateConnectionList(id, 'client', payload)
+  }
   return db.update<ClientModel>('clients', id, data)
 }
 
diff --git a/src/views/brokers/BrokersList.vue b/src/views/brokers/BrokersList.vue
index ced19fdbf..be898d89f 100644
--- a/src/views/brokers/BrokersList.vue
+++ b/src/views/brokers/BrokersList.vue
@@ -10,7 +10,7 @@
         <div>
           <div class="broker-name">{{ broker.brokerName }}</div>
           <el-tooltip
-            :effect="theme"
+            :effect="theme !== 'light' ? 'dark' : 'light'"
             :disabled="`${broker.brokerAddress}:${broker.brokerPort}`.length < 35"
             :content="`${broker.brokerAddress}:${broker.brokerPort}`"
             placement="top">
diff --git a/src/views/brokers/clients/ClientCreate.vue b/src/views/brokers/clients/ClientDetail.vue
similarity index 92%
rename from src/views/brokers/clients/ClientCreate.vue
rename to src/views/brokers/clients/ClientDetail.vue
index 420dac07e..7699a2c46 100644
--- a/src/views/brokers/clients/ClientCreate.vue
+++ b/src/views/brokers/clients/ClientDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="client-create card-form">
+  <div class="client-detail card-form">
     <div class="client-topbar right-topbar" :style="{ top: $store.state.app.MacOSTop }">
       <div class="client-info topbar">
         <div class="client-header">
@@ -157,14 +157,14 @@
 <script lang="ts">
 import { remote } from 'electron'
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { createClient, loadClient } from '@/utils/api/broker'
+import { createClient, loadClient, updateClient } from '@/utils/api/broker'
 import getClientId from '@/utils/getClientId'
 import { ClientModel, BrokerModel } from '../types'
 
 @Component({
   components: {},
 })
-export default class ClientCreate extends Vue {
+export default class ClientDetail extends Vue {
   @Prop({ required: true }) private broker!: BrokerModel
 
   private record: ClientModel = {
@@ -244,12 +244,20 @@ export default class ClientCreate extends Vue {
       if (!valid) {
         return false
       }
-      this.record.brokeruuid = this.broker.id || ''
+      this.record.brokeruuid = this.broker.id as string
       const data = { ...this.record }
-      const res = await createClient(data)
-      if (res) {
-        this.$message.success(this.$t('common.createSuccess') as string)
-        this.$router.push({ path: `/brokers/${this.broker.id}` })
+      if (this.oper === 'create') {
+        const res = await createClient(data)
+        if (res) {
+          this.$message.success(this.$t('common.createSuccess') as string)
+          this.$router.push({ path: `/brokers/${this.broker.id}` })
+        }
+      } else {
+        const res = await updateClient(data.id as string, data, true)
+        if (res) {
+          this.$message.success(this.$t('common.editSuccess') as string)
+          this.$router.push({ path: `/brokers/${this.broker.id}` })
+        }
       }
     })
   }
@@ -268,7 +276,7 @@ export default class ClientCreate extends Vue {
 @import "~@/assets/scss/variable.scss";
 @import "~@/assets/scss/mixins.scss";
 
-.client-create {
+.client-detail {
   height: 100%;
 
   .client-topbar {
diff --git a/src/views/brokers/index.vue b/src/views/brokers/index.vue
index baa554bc5..99f741693 100644
--- a/src/views/brokers/index.vue
+++ b/src/views/brokers/index.vue
@@ -20,7 +20,7 @@
     <div v-else class="brokers-view right-content" :style="{
       paddingTop: brokerViewTop,
     }">
-      <ClientCreate v-if="isClientPage" :broker="currentBroker"/>
+      <ClientDetail v-if="isClientPage" :broker="currentBroker"/>
       <BrokerContent
         v-else
         :record="currentBroker"
@@ -81,7 +81,7 @@ import SearchTopbar from '@/components/SearchTopbar.vue'
 import MyDialog from '@/components/MyDialog.vue'
 import BrokersList from './BrokersList.vue'
 import BrokerContent from './BrokerContent.vue'
-import ClientCreate from './clients/ClientCreate.vue'
+import ClientDetail from './clients/ClientDetail.vue'
 import EmptyPage from '@/components/EmptyPage.vue'
 import matchSearch from '@/utils/matchSearch'
 import {
@@ -96,7 +96,7 @@ import { BrokerModel, ClientModel } from './types'
     BrokersList,
     MyDialog,
     BrokerContent,
-    ClientCreate,
+    ClientDetail,
     EmptyPage,
   },
 })
diff --git a/src/views/connections/ConnectionsList.vue b/src/views/connections/ConnectionsList.vue
index 133a587ee..8dca890fc 100644
--- a/src/views/connections/ConnectionsList.vue
+++ b/src/views/connections/ConnectionsList.vue
@@ -15,7 +15,7 @@
           </div>
           <div class="client-info">
             <el-tooltip
-              :effect="theme"
+              :effect="theme !== 'light' ? 'dark' : 'light'"
               :disabled="`${item.name}@${item.host}:${item.port}`.length <= 30"
               :content="`${item.name}@${item.host}:${item.port}`"
               placement="top">
diff --git a/src/views/connections/SubscriptionsList.vue b/src/views/connections/SubscriptionsList.vue
index c486269de..33b8e0a1d 100644
--- a/src/views/connections/SubscriptionsList.vue
+++ b/src/views/connections/SubscriptionsList.vue
@@ -19,7 +19,7 @@
         </div>
         <div class="topics-item" v-for="(sub, index) in subsList" :key="index">
           <el-tooltip
-            :effect="theme"
+            :effect="theme !== 'light' ? 'dark' : 'light'"
             :disabled="sub.topic.length < 20"
             :content="sub.topic"
             placement="top">

From 498f78872d776a0497ed7c7d098148a02ed3252f Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Fri, 22 Nov 2019 10:48:57 +0800
Subject: [PATCH 3/4] fix(connections): fixed connected clients can't be
 selected

---
 src/types/global.d.ts           |  1 +
 src/utils/api/broker.ts         | 15 +++++++++++----
 src/utils/i18n.ts               |  2 +-
 src/views/connections/index.vue | 16 ++++++++++------
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 01e28ac06..76f3b0935 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -87,6 +87,7 @@ declare global {
     value: any,
     label: string | TranslateResult,
     children?: Options[],
+    disabled?: boolean,
   }
 
   interface SubscriptionModel {
diff --git a/src/utils/api/broker.ts b/src/utils/api/broker.ts
index 63bd829f5..764f63574 100644
--- a/src/utils/api/broker.ts
+++ b/src/utils/api/broker.ts
@@ -125,15 +125,22 @@ export const deleteClient = (clientId: string): ClientModel => {
 }
 
 export const loadClientOptions = (): Options[] => {
-  const brokers: BrokerModel[] | [] = db.get<BrokerModel[]>('brokers')
+  const brokers: BrokerModel[] = loadBrokers()
+  const connections: ConnectionModel[] = loadConnections()
+  const connectionIds = connections.map((connection) => connection.clientuuid)
+
   const res: Options[] = brokers.map((broker: BrokerModel): Options => {
     const clients = loadClients(broker.id as string)
-    const children: Options[] = clients.map((client: ClientModel): Options => (
-      {
+    const children: Options[] = clients.map((client: ClientModel): Options => {
+      const clientData: Options = {
         label: client.clientName,
         value: client.id,
       }
-    ))
+      if (connectionIds.includes(client.id as string)) {
+        clientData.disabled = true
+      }
+      return clientData
+    })
     return {
       label: broker.brokerName,
       value: broker.id,
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 0225afb84..310582f3a 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -13,7 +13,7 @@ export const formati18n = (transItems: i18nLocaleModel): VueI18n.LocaleMessages
     settings: {},
     common: {},
   }
-  transItems.forEach((item: string) => {
+  transItems.forEach((item) => {
     const values = require(`@/lang/${item}`).default
     Object.keys(values).forEach((key: string) => {
       const { zh: $zh, en: $en } = values[key]
diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue
index 307481523..0a0c8ef6f 100644
--- a/src/views/connections/index.vue
+++ b/src/views/connections/index.vue
@@ -40,6 +40,7 @@
           <el-cascader
             clearable
             v-model="record.selector"
+            :placeholder="`Broker / ${$t('brokers.client')}`"
             :options="clientOptions">
           </el-cascader>
         </el-form-item>
@@ -64,7 +65,7 @@ import ConnectionsContent from './ConnectionsContent.vue'
 import { ConnectionModel } from './types'
 import { BrokerModel, ClientModel } from '../brokers/types'
 
-interface RecordModel {
+interface NewConnectionModel {
   selector: [string, string] | []
 }
 
@@ -110,9 +111,10 @@ export default class Connections extends Vue {
     cert: '',
     key: '',
   }
-  private record: RecordModel = {
+  private record: NewConnectionModel = {
     selector: [],
   }
+  private clientOptions: Options[] = []
   private data: ConnectionModel = {
     clientuuid: '',
     brokeruuid: '',
@@ -147,10 +149,6 @@ export default class Connections extends Vue {
     return this.$route.params.id
   }
 
-  get clientOptions(): Options[] {
-    return loadClientOptions()
-  }
-
   get vueForm(): VueForm {
     return this.$refs.form as VueForm
   }
@@ -161,6 +159,10 @@ export default class Connections extends Vue {
     }
   }
 
+  private async loadOptions(): Promise<void> {
+    this.clientOptions = await loadClientOptions()
+  }
+
   private async loadDetail(id: string): Promise<void> {
     const res: ConnectionModel | null = await loadConnection(id)
     if (res) {
@@ -184,6 +186,7 @@ export default class Connections extends Vue {
 
   private showNewConnectionDialog(): void {
     this.newConnectionDialogVisible = true
+    this.loadOptions()
   }
 
   private saveConnection(): void {
@@ -291,6 +294,7 @@ export default class Connections extends Vue {
 
   private created(): void {
     this.loadData()
+    this.loadOptions()
   }
 }
 </script>

From 48b338b1a0e845525930ce85a96c3f812e8674a1 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Fri, 22 Nov 2019 11:02:59 +0800
Subject: [PATCH 4/4] docs(readme): imporve usage on README

---
 README-CN.md | 7 +++++++
 README.md    | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/README-CN.md b/README-CN.md
index 985a708d7..1a978a722 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -24,6 +24,13 @@ MQTTX 采用了聊天界面形式，简化了页面操作逻辑，方便用户
 
 1. 首先创建一个 Broker
 
+```conf
+# 如果你暂时没有一个可用的 MQTT Broker，你可以用这个公共的 Broker 进行测试
+
+Broker 地址: broker.emqx.io
+Broker 端口: 1883
+```
+
 2. 同一个 Broker 下可以创建多个客户端
 
 3. 回到连接页面，选择刚才创建的 Broker 下的客户端进行连接测试
diff --git a/README.md b/README.md
index f4178bc5b..6cf599592 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,13 @@ Download from [GitHub Releases](https://github.com/emqx/MQTTX/releases) and inst
 
 1. Create broker
 
+```conf
+# If you don't have a mqtt broker available, you can use this public broker test.
+
+Broker Address: broker.emqx.io
+Broker Port: 1883
+```
+
 2. The same broker can create many clients
 
 3. Go back to connectons page, select the broker's client for connection testing