add different styling for filter results

dagster-io · Mar 11, 2024 · 8523819 · 8523819
1 parent ec24459
commit 8523819
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 83 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -312,74 +312,18 @@ export const SearchDialog = ({
           transitionDuration={100}
         >
           <Container>
-<<<<<<< HEAD
             {searchInput}
             {searchResults}
-=======
-            <SearchBox hasQueryString={!!queryString.length}>
-              <Icon name="search" color={Colors.accentGray()} size={20} />
-              <SearchInput
-                data-search-input="1"
-                autoFocus
-                spellCheck={false}
-                onChange={onChange}
-                onKeyDown={onKeyDown}
-                placeholder={
-                  isAssetSearch ? 'Search assets' : 'Search assets, jobs, schedules, sensors…'
-                }
-                type="text"
-                value={queryString}
-              />
-              {loading ? <Spinner purpose="body-text" /> : null}
-            </SearchBox>
-            <SearchResults
-              highlight={highlight}
-              queryString={queryString}
-              results={renderedResults}
-              onClickResult={onClickResult}
-              filterResults={[]}
-            />
->>>>>>> 60e496c9bd (display filter results & bold matches)
           </Container>
         </Overlay>
       </>
     );
   } else {
     return (
-<<<<<<< HEAD
       <SearchInputWrapper>
         {searchInput}
         <SearchResultsWrapper>{searchResults}</SearchResultsWrapper>
       </SearchInputWrapper>
-=======
-      <InPageSearchContainer>
-        <SearchBox hasQueryString={!!queryString.length}>
-          <Icon name="search" color={Colors.accentGray()} size={20} />
-          <SearchInput
-            data-search-input="1"
-            autoFocus
-            spellCheck={false}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            placeholder={
-              isAssetSearch ? 'Search assets' : 'Search assets, jobs, schedules, sensors…'
-            }
-            type="text"
-            value={queryString}
-          />
-          {loading ? <Spinner purpose="body-text" /> : null}
-        </SearchBox>
-        <SearchResultsWrapper>
-          <SearchResults
-            highlight={highlight}
-            queryString={queryString}
-            results={renderedResults}
-            filterResults={assetFilterResults}
-            onClickResult={onClickResult}
-          />
-        </SearchResultsWrapper>
-      </InPageSearchContainer>
->>>>>>> 60e496c9bd (display filter results & bold matches)
     );
   }
 };

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx
@@ -135,33 +135,26 @@ const SearchResultItem = React.memo(({isHighlight, onClickResult, result}: ItemP
   return (
     <Item isHighlight={isHighlight} ref={element}>
       <ResultLink to={item.href} onMouseDown={onClick}>
-        <Box
-          flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
-          style={{width: '100%'}}
-        >
-          <Box flex={{direction: 'row', alignItems: 'center'}}>
-            <StyledTag
-              $fillColor={Colors.backgroundGray()}
-              $interactive={false}
-              $textColor={Colors.textDefault()}
-            >
-              <Icon
-                name={iconForType(item.type)}
-                color={isHighlight ? Colors.textDefault() : Colors.textLight()}
-              />
-              {isAssetFilterSearchResultType(item.type) ? (
-                <SearchResultLabel>{assetFilterPrefixString(item.type)}:&nbsp;</SearchResultLabel>
-              ) : (
-                <></>
-              )}
-              {labelComponents.map((component) => component)}
-            </StyledTag>
-            <div style={{marginLeft: '8px'}}>
-              <Description isHighlight={isHighlight}>
-                {item.numResults ? `${item.numResults} assets` : item.description}
-              </Description>
-            </div>
-          </Box>
+        <Box flex={{direction: 'row', alignItems: 'center'}} style={{width: '100%'}}>
+          <StyledTag
+            $fillColor={Colors.backgroundGray()}
+            $interactive={false}
+            $textColor={Colors.textDefault()}
+          >
+            <Icon
+              name={iconForType(item.type)}
+              color={isHighlight ? Colors.textDefault() : Colors.textLight()}
+            />
+            {isAssetFilterSearchResultType(item.type) && (
+              <SearchResultLabel>{assetFilterPrefixString(item.type)}:&nbsp;</SearchResultLabel>
+            )}
+            {labelComponents.map((component) => component)}
+          </StyledTag>
+          <div style={{marginLeft: '8px'}}>
+            <Description isHighlight={isHighlight}>
+              {item.numResults ? `${item.numResults} assets` : item.description}
+            </Description>
+          </div>
         </Box>
       </ResultLink>
     </Item>