Web console: make typing fun again (#14632)

* extract common function

* make typing fun again

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('');
       }}
     />

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);

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>
             );

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>