[dagit] Make log filter input clearable (#7805)

js_modules/dagit/packages/core/src/runs/LogsFilterInput.tsx

@@ -4,6 +4,8 @@ import {
   TextInput,
   SuggestionProvider,
   useSuggestionsForString,
+  Icon,
+  IconWrapper,
 } from '@dagster-io/ui';
 import Fuse from 'fuse.js';
 import * as React from 'react';
@@ -58,6 +60,7 @@ export const LogsFilterInput: React.FC<Props> = (props) => {
 
   const [state, dispatch] = React.useReducer(reducer, initialState);
   const {shown, highlight} = state;
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const {empty, perProvider} = React.useMemo(() => {
     const perProvider = suggestionProviders.reduce((accum, provider) => {
@@ -114,6 +117,12 @@ export const LogsFilterInput: React.FC<Props> = (props) => {
     [onChange, onSelectSuggestion],
   );
 
+  const onClear = React.useCallback(() => {
+    dispatch({type: 'change-query'});
+    onChange('');
+    inputRef.current?.focus();
+  }, [onChange]);
+
   const onKeyDown = (e: React.KeyboardEvent) => {
     const {key} = e;
     if (key === 'Escape') {
@@ -165,10 +174,16 @@ export const LogsFilterInput: React.FC<Props> = (props) => {
         spellCheck={false}
         autoCorrect="off"
         value={value}
+        ref={inputRef}
         onChange={onInputChange}
         onFocus={() => dispatch({type: 'show-popover'})}
         onBlur={() => dispatch({type: 'hide-popover'})}
         onKeyDown={onKeyDown}
+        rightElement={
+          <ClearButton onClick={onClear}>
+            <Icon name="cancel" />
+          </ClearButton>
+        }
       />
     </Popover>
   );
@@ -202,6 +217,31 @@ const ResultItem: React.FC<{
   );
 };
 
+const ClearButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin: 0 -2px 0 0;
+  padding: 2px;
+
+  ${IconWrapper} {
+    background-color: ${Colors.Gray400};
+    transition: background-color 100ms linear;
+  }
+
+  :hover ${IconWrapper}, :focus ${IconWrapper} {
+    background-color: ${Colors.Gray700};
+  }
+
+  :active ${IconWrapper} {
+    background-color: ${Colors.Dark};
+  }
+
+  :focus {
+    outline: none;
+  }
+`;
+
 const FilterInput = styled(TextInput)`
   width: 300px;
 `;

js_modules/dagit/packages/ui/src/components/TextInput.stories.tsx

@@ -2,6 +2,7 @@ import {Meta} from '@storybook/react/types-6-0';
 import * as React from 'react';
 
 import {Colors} from './Colors';
+import {Icon} from './Icon';
 import {TextInput} from './TextInput';
 
 // eslint-disable-next-line import/no-default-export
@@ -45,3 +46,16 @@ export const StrokeColor = () => {
     />
   );
 };
+
+export const RightElement = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextInput
+      icon="layers"
+      placeholder="Type anything…"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      rightElement={<Icon name="info" color={Colors.Gray500} />}
+    />
+  );
+};

js_modules/dagit/packages/ui/src/components/TextInput.tsx

@@ -34,7 +34,7 @@ export const TextInput = React.forwardRef(
           $hasIcon={!!icon}
           type={type}
         />
-        {rightElement ? rightElement : null}
+        {rightElement ? <RightContainer>{rightElement}</RightContainer> : null}
       </Container>
     );
   },
@@ -58,7 +58,7 @@ export const TextInputContainerStyles = css`
 const Container = styled.div<{$disabled: boolean}>`
   ${TextInputContainerStyles}
 
-  ${IconWrapper}:first-child {
+  > ${IconWrapper}:first-child {
     position: absolute;
     left: 8px;
     top: 8px;
@@ -71,6 +71,16 @@ const Container = styled.div<{$disabled: boolean}>`
   }
 `;
 
+const RightContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
 export const TextInputStyles = css`
   border: none;
   border-radius: 8px;