From 295653648b2962c9b71f78880927621b507e84f6 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 20 Jul 2023 16:22:41 -0700
Subject: [PATCH] Web console: make typing fun again (#14632)

* extract common function

* make typing fun again
---
 .../src/react-table/react-table-inputs.tsx       | 16 ++++++++++------
 web-console/src/utils/date.ts                    |  4 ++++
 .../execution-stages-pane.tsx                    |  3 ++-
 .../recent-query-task-panel.tsx                  |  9 +++++++--
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/web-console/src/react-table/react-table-inputs.tsx b/web-console/src/react-table/react-table-inputs.tsx
index 4be942cd79f..50937750b38 100644
--- a/web-console/src/react-table/react-table-inputs.tsx
+++ b/web-console/src/react-table/react-table-inputs.tsx
@@ -41,7 +41,7 @@ interface FilterRendererProps {
 
 export function GenericFilterInput({ column, filter, onChange, key }: FilterRendererProps) {
   const [menuOpen, setMenuOpen] = useState(false);
-  const [focused, setFocused] = useState(false);
+  const [focusedText, setFocusedText] = useState<string | undefined>();
 
   const enableComparisons = String(column.headerClassName).includes('enable-comparisons');
 
@@ -53,7 +53,7 @@ export function GenericFilterInput({ column, filter, onChange, key }: FilterRend
   return (
     <InputGroup
       className={classNames('generic-filter-input', {
-        'hide-icon': !filter && !(menuOpen || focused),
+        'hide-icon': !filter && !(menuOpen || typeof focusedText === 'string'),
       })}
       key={key}
       leftElement={
@@ -79,14 +79,18 @@ export function GenericFilterInput({ column, filter, onChange, key }: FilterRend
           <Button className="filter-mode-button" icon={filterModeToIcon(mode)} minimal />
         </Popover2>
       }
-      value={needle}
-      onChange={e => onChange(combineModeAndNeedle(mode, e.target.value))}
+      value={focusedText ?? needle}
+      onChange={e => {
+        const enteredText = e.target.value;
+        setFocusedText(enteredText);
+        onChange(combineModeAndNeedle(mode, enteredText));
+      }}
       rightElement={
         filter ? <Button icon={IconNames.CROSS} minimal onClick={() => onChange('')} /> : undefined
       }
-      onFocus={() => setFocused(true)}
+      onFocus={() => setFocusedText(needle)}
       onBlur={e => {
-        setFocused(false);
+        setFocusedText(undefined);
         if (filter && !e.target.value) onChange('');
       }}
     />
diff --git a/web-console/src/utils/date.ts b/web-console/src/utils/date.ts
index dcc4374d4a3..ecab2c39ca4 100644
--- a/web-console/src/utils/date.ts
+++ b/web-console/src/utils/date.ts
@@ -24,6 +24,10 @@ export function dateToIsoDateString(date: Date): string {
   return date.toISOString().slice(0, 10);
 }
 
+export function prettyFormatIsoDate(isoDate: string): string {
+  return isoDate.replace('T', ' ').replace(/\.\d\d\dZ$/, '');
+}
+
 export function utcToLocalDate(utcDate: Date): Date {
   // Function removes the local timezone of the date and displays it in UTC
   return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
diff --git a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
index 98035b3ed54..57827534df1 100644
--- a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
+++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
@@ -49,6 +49,7 @@ import {
   formatInteger,
   formatPercent,
   oneOf,
+  prettyFormatIsoDate,
   twoLines,
 } from '../../../utils';
 
@@ -685,7 +686,7 @@ ${title} uncompressed size: ${formatBytesCompact(
             if (!value) return null;
             return (
               <div title={value + (duration ? `/${formatDurationWithMs(duration)}` : '')}>
-                <div>{value.replace('T', ' ').replace(/\.\d\d\dZ$/, '')}</div>
+                <div>{prettyFormatIsoDate(value)}</div>
                 <div>{duration ? formatDurationDynamic(duration) : ''}</div>
               </div>
             );
diff --git a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
index bd31c88693d..13e8f716a7c 100644
--- a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
+++ b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
@@ -32,7 +32,12 @@ import { Execution, WorkbenchQuery } from '../../../druid-models';
 import { cancelTaskExecution, getTaskExecution } from '../../../helpers';
 import { useClock, useInterval, useQueryManager } from '../../../hooks';
 import { AppToaster } from '../../../singletons';
-import { downloadQueryDetailArchive, formatDuration, queryDruidSql } from '../../../utils';
+import {
+  downloadQueryDetailArchive,
+  formatDuration,
+  prettyFormatIsoDate,
+  queryDruidSql,
+} from '../../../utils';
 import { CancelQueryDialog } from '../cancel-query-dialog/cancel-query-dialog';
 import { workStateStore } from '../work-state-store';
 
@@ -231,7 +236,7 @@ LIMIT 100`,
                       style={{ color }}
                     />
                     <div className="timing">
-                      {w.createdTime.replace('T', ' ').replace(/\.\d\d\dZ$/, '') +
+                      {prettyFormatIsoDate(w.createdTime) +
                         (duration > 0 ? ` (${formatDuration(duration)})` : '')}
                     </div>
                   </div>