From dfd18152ca593c7e1e4044543e4e2a851171e973 Mon Sep 17 00:00:00 2001
From: DanielSPham <36108616+DanielSPham@users.noreply.github.com>
Date: Mon, 14 Sep 2020 16:34:56 -0700
Subject: [PATCH] Fixed placeholder (#201)

* Fixed placeholder

* Clean up

Co-authored-by: Daniel Si Pham <v-danpha@microsoft.com>
---
 src/Explorer/Panes/AddDatabasePane.html | 4 ++--
 src/Explorer/Panes/AddDatabasePane.ts   | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Panes/AddDatabasePane.html b/src/Explorer/Panes/AddDatabasePane.html
index 4df48d3f8..de0e6db83 100644
--- a/src/Explorer/Panes/AddDatabasePane.html
+++ b/src/Explorer/Panes/AddDatabasePane.html
@@ -73,8 +73,8 @@
           </p>
 
           <input id="database-id" type="text" aria-required="true" autocomplete="off" pattern="[^/?#\\]*[^/?# \\]"
-              title="May not end with space nor contain characters '\' '/' '#' '?'" placeholder="Type a new database id"
-              size="40" class="collid" data-bind="textInput: databaseId, hasFocus: firstFieldHasFocus"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              size="40" class="collid" data-bind="textInput: databaseId, hasFocus: firstFieldHasFocus, attr: { placeholder: databaseIdPlaceHolder }"
               aria-label="Database id" autofocus>
 
           <!-- Database provisioned throughput - Start -->
diff --git a/src/Explorer/Panes/AddDatabasePane.ts b/src/Explorer/Panes/AddDatabasePane.ts
index e9cd4c986..d54fffc2f 100644
--- a/src/Explorer/Panes/AddDatabasePane.ts
+++ b/src/Explorer/Panes/AddDatabasePane.ts
@@ -16,6 +16,7 @@ import { PlatformType } from "../../PlatformType";
 export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
   public databaseIdLabel: ko.Computed<string>;
+  public databaseIdPlaceHolder: ko.Computed<string>;
   public databaseId: ko.Observable<string>;
   public databaseIdTooltipText: ko.Computed<string>;
   public databaseLevelThroughputTooltipText: ko.Computed<string>;
@@ -70,6 +71,11 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.databaseIdLabel = ko.computed<string>(() =>
       this.container.isPreferredApiCassandra() ? "Keyspace id" : "Database id"
     );
+
+    this.databaseIdPlaceHolder = ko.computed<string>(() =>
+      this.container.isPreferredApiCassandra() ? "Type a new keyspace id" : "Type a new database id"
+    );
+
     this.databaseIdTooltipText = ko.computed<string>(() => {
       const isCassandraAccount: boolean = this.container.isPreferredApiCassandra();
       return `A ${isCassandraAccount ? "keyspace" : "database"} is a logical container of one or more ${