suddjian commented on a change in pull request #15868:
URL: https://github.com/apache/superset/pull/15868#discussion_r675739658
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
##########
@@ -469,83 +578,147 @@ export default function VizTypeGallery(props:
VizTypeGalleryProps) {
searchInputRef.current!.blur();
}, []);
- const selectCategory = useCallback(
+ const clickSelector = useCallback(
(key: string) => {
if (isSearchFocused) {
stopSearching();
}
- setActiveCategory(key);
+ setActiveSelector(key);
// clear the selected viz if it is not present in the new category
const isSelectedVizCompatible =
selectedVizMetadata && doesVizMatchCategory(selectedVizMetadata, key);
- if (key !== activeCategory && !isSelectedVizCompatible) {
+ if (key !== activeSelector && !isSelectedVizCompatible) {
onChange(null);
}
},
[
stopSearching,
isSearchFocused,
- activeCategory,
+ activeSelector,
selectedVizMetadata,
onChange,
],
);
+ const clearSelector = useCallback(e => {
+ e.stopPropagation();
+ if (isSearchFocused) {
+ stopSearching();
+ }
+ // clear current selector and set all charts
+ setActiveSelector(ALL_CHARTS);
+ }, []);
+
const vizEntriesToDisplay = isActivelySearching
? searchResults
- : chartsByCategory[activeCategory] || [];
+ : activeSelector === ALL_CHARTS
+ ? sortedMetadata
+ : chartsByCategory[activeSelector] || chartsByTags[activeSelector] || [];
return (
<VizPickerLayout className={className}>
<LeftPane>
- <SearchWrapper>
- <Input
- type="text"
- ref={searchInputRef as any /* cast required because emotion */}
- value={searchInputValue}
- placeholder={t('Search')}
- onChange={changeSearch}
- onFocus={focusSearch}
- data-test={`${VIZ_TYPE_CONTROL_TEST_ID}__search-input`}
- prefix={
- <InputIconAlignment>
- <Icons.Search iconSize="m" />
- </InputIconAlignment>
- }
- suffix={
- <InputIconAlignment>
- {searchInputValue && (
- <Icons.XLarge iconSize="m" onClick={stopSearching} />
- )}
- </InputIconAlignment>
- }
- />
- </SearchWrapper>
- <CategoriesWrapper>
- {categories.map(category => (
- <CategorySelector
- key={category}
- category={category}
- isSelected={!isActivelySearching && category === activeCategory}
- onClick={selectCategory}
- />
- ))}
- </CategoriesWrapper>
+ <Wrapper>
+ <Collapse
+ expandIconPosition="right"
+ ghost
+ defaultActiveKey={Object.values(COLLAPSE_LABEL)}
+ >
+ <Collapse.Panel
+ header={
+ <span className="header">
+ {COLLAPSE_LABEL.RECOMMENDED_TAGS}
+ </span>
+ }
+ key={COLLAPSE_LABEL.RECOMMENDED_TAGS}
+ >
+ {RECOMMENDED_TAGS.map(tag => (
+ <Selector
+ key={tag}
+ selector={tag}
+ type="Tags"
+ isSelected={!isActivelySearching && tag === activeSelector}
+ onClick={clickSelector}
+ onClear={clearSelector}
+ />
+ ))}
+ </Collapse.Panel>
+ <Collapse.Panel
+ header={
+ <span className="header">{COLLAPSE_LABEL.ALL_CHARTS}</span>
+ }
+ key={COLLAPSE_LABEL.ALL_CHARTS}
+ >
+ <Selector
Review comment:
It's a bit strange to have a collapse panel that will only ever have one
item in it. Should we put the "All Charts" selector at the top of the left pane
instead, outside of the collapse?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
