From 8e7b95fd628408879039e8a3cf9c497b58dc0306 Mon Sep 17 00:00:00 2001 From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Date: Mon, 7 Jun 2021 18:44:35 +0530 Subject: [PATCH] Omnibar UI/UX improvements (#4677) - Open omnibar on cmd + p as well - Add analytics event for opening discord link - Update api icon to keep same width - Click anywhere on search result row will now open the link instead of just clicking on the icon - Change text from "Recents" to "Recent Entities" - Show a footer with a few instructions. --- .../editorComponents/GlobalSearch/Footer.tsx | 49 +++++++++++++++++++ .../GlobalSearch/ResultsNotFound.tsx | 2 + .../GlobalSearch/SearchResults.tsx | 16 +++--- .../editorComponents/GlobalSearch/index.tsx | 4 +- app/client/src/pages/Editor/GlobalHotKeys.tsx | 20 +++++--- app/client/src/utils/AnalyticsUtil.tsx | 3 +- 6 files changed, 79 insertions(+), 15 deletions(-) create mode 100644 app/client/src/components/editorComponents/GlobalSearch/Footer.tsx diff --git a/app/client/src/components/editorComponents/GlobalSearch/Footer.tsx b/app/client/src/components/editorComponents/GlobalSearch/Footer.tsx new file mode 100644 index 0000000000..ad5dfb33b4 --- /dev/null +++ b/app/client/src/components/editorComponents/GlobalSearch/Footer.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import styled from "styled-components"; + +const Wrapper = styled.div` + span { + color: white; + font-variant: all-small-caps; + font-size: ${(props) => props.theme.fontSizes[2]}px; + margin-right: ${(props) => props.theme.spaces[1]}px; + } + div { + margin-right: ${(props) => props.theme.spaces[7]}px; + font-size: ${(props) => props.theme.fontSizes[2]}px; + text-align: center; + } + color: ${(props) => props.theme.colors.globalSearch.searchItemText}; + padding: ${(props) => props.theme.spaces[1]}px + ${(props) => props.theme.spaces[6]}px; + display: flex; + flex-direction: row; +`; + +const FOOTER_INFO = [ + { + action: "\u2191\u2193", + description: "Select", + }, + { + action: "ENTER", + description: "Open", + }, +]; + +function Footer() { + return ( + + {FOOTER_INFO.map((info) => { + return ( +
+ {info.action} + {info.description} +
+ ); + })} + + ); +} + +export default Footer; diff --git a/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx b/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx index f1af2aa4fc..84766c4720 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx @@ -4,6 +4,7 @@ import NoSearchDataImage from "assets/images/no_search_data.png"; import { NO_SEARCH_DATA_TEXT } from "constants/messages"; import { getTypographyByKey } from "constants/DefaultTheme"; import { ReactComponent as DiscordIcon } from "assets/icons/help/discord.svg"; +import AnalyticsUtil from "utils/AnalyticsUtil"; const Container = styled.div` display: flex; @@ -49,6 +50,7 @@ function ResultsNotFound() { className="discord-link" onClick={() => { window.open("https://discord.gg/rBTTVJp", "_blank"); + AnalyticsUtil.logEvent("DISCORD_LINK_CLICK"); }} > diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx index 5da83a7c9e..42a7cb03e3 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx @@ -25,6 +25,7 @@ import { getActionConfig } from "pages/Editor/Explorer/Actions/helpers"; import { AppState } from "reducers"; import { keyBy, noop } from "lodash"; import { getPageList } from "selectors/editorSelectors"; +import { PluginType } from "entities/Action"; const DocumentIcon = HelpIcons.DOCUMENT; @@ -158,10 +159,13 @@ function ActionItem(props: { return state.entities.plugins.list; }); const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]); - const icon = getActionConfig(pluginType)?.getIcon( - item.config, - pluginGroups[item.config.datasource.pluginId], - ); + const icon = + pluginType === PluginType.API + ? getActionConfig(pluginType)?.icon + : getActionConfig(pluginType)?.getIcon( + item.config, + pluginGroups[item.config.datasource.pluginId], + ); let title = getItemTitle(item); const pageName = usePageName(config.pageId); @@ -293,9 +297,7 @@ function SearchItemComponent(props: ItemProps) { itemType !== SEARCH_ITEM_TYPES.placeholder ) { setActiveItemIndex(index); - if (itemType !== SEARCH_ITEM_TYPES.document) { - searchContext?.handleItemLinkClick(item, "SEARCH_ITEM"); - } + searchContext?.handleItemLinkClick(item, "SEARCH_ITEM"); } }} ref={itemRef} diff --git a/app/client/src/components/editorComponents/GlobalSearch/index.tsx b/app/client/src/components/editorComponents/GlobalSearch/index.tsx index 113936eb1b..07577ddb08 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/index.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/index.tsx @@ -46,6 +46,7 @@ import { keyBy, noop } from "lodash"; import EntitiesIcon from "assets/icons/ads/entities.svg"; import DocsIcon from "assets/icons/ads/docs.svg"; import RecentIcon from "assets/icons/ads/recent.svg"; +import Footer from "./Footer"; const StyledContainer = styled.div` width: 750px; @@ -204,7 +205,7 @@ function GlobalSearch() { ); }, [pages, query]); - const recentsSectionTitle = getSectionTitle("Recents", RecentIcon); + const recentsSectionTitle = getSectionTitle("Recent Entities", RecentIcon); const docsSectionTitle = getSectionTitle("Documentation Links", DocsIcon); const entitiesSectionTitle = getSectionTitle("Entities", EntitiesIcon); @@ -397,6 +398,7 @@ function GlobalSearch() { )} + {!query &&