From 8f0755dbf0bf7c1e17d5ad72a3f9854a145e92f2 Mon Sep 17 00:00:00 2001
From: FernandoAscencio <48699277+FernandoAscencio@users.noreply.github.com>
Date: Mon, 10 Apr 2023 12:52:38 -0400
Subject: [PATCH] siw: add placeholder for glob inputs (#12389)

The commit adds a placeholder (visible on focus) for the search-in-workspace (siw) glob input fields, namely `include` and `exclude`. The behavior is consistent with VS Code.

Signed-off-by: FernandoAscencio <fernando.ascencio.cama@ericsson.com>
---
 .../src/browser/search-in-workspace-widget.tsx                | 4 ++++
 packages/search-in-workspace/src/browser/styles/index.css     | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
index e2f19046984fa..5dbea66892b2f 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -619,6 +619,10 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
                 defaultValue={value}
                 autoComplete='off'
                 id={kind + '-glob-field'}
+                placeholder={kind === 'include'
+                    ? nls.localizeByDefault('e.g. *.ts, src/**/include')
+                    : nls.localizeByDefault('e.g. *.ts, src/**/exclude')
+                }
                 onKeyUp={e => {
                     if (e.target) {
                         const targetValue = (e.target as HTMLInputElement).value || '';
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index bd22a6ec99443..97c05d86657d9 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -189,6 +189,10 @@
     font-size: var(--theia-ui-font-size0);
 }
 
+.t-siw-search-container .searchHeader .glob-field-container .glob-field .theia-input:not(:focus)::placeholder {
+    color: transparent;
+}
+
 .t-siw-search-container .resultContainer {
     height: 100%;
     margin-left: 13px;