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.

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 (
+    <Wrapper>
+      {FOOTER_INFO.map((info) => {
+        return (
+          <div key={info.action}>
+            <span>{info.action}</span>
+            {info.description}
+          </div>
+        );
+      })}
+    </Wrapper>
+  );
+}
+
+export default Footer;

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");
           }}
         >
           <StyledDiscordIcon color="red" height={22} width={24} />

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,7 +159,10 @@ function ActionItem(props: {
     return state.entities.plugins.list;
   });
   const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]);
-  const icon = getActionConfig(pluginType)?.getIcon(
+  const icon =
+    pluginType === PluginType.API
+      ? getActionConfig(pluginType)?.icon
+      : getActionConfig(pluginType)?.getIcon(
           item.config,
           pluginGroups[item.config.datasource.pluginId],
         );
@@ -293,10 +297,8 @@ function SearchItemComponent(props: ItemProps) {
           itemType !== SEARCH_ITEM_TYPES.placeholder
         ) {
           setActiveItemIndex(index);
-          if (itemType !== SEARCH_ITEM_TYPES.document) {
           searchContext?.handleItemLinkClick(item, "SEARCH_ITEM");
         }
-        }
       }}
       ref={itemRef}
     >

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() {
                   <ResultsNotFound />
                 )}
               </div>
+              {!query && <Footer />}
             </StyledContainer>
           </AlgoliaSearchWrapper>
         </SearchModal>

app/client/src/pages/Editor/GlobalHotKeys.tsx

@@ -71,6 +71,12 @@ class GlobalHotKeys extends React.Component<Props> {
     return !!multipleWidgetsSelected;
   }
 
+  public onOnmnibarHotKeyDown(e: KeyboardEvent) {
+    e.preventDefault();
+    this.props.toggleShowGlobalSearchModal();
+    AnalyticsUtil.logEvent("OPEN_OMNIBAR", { source: "HOTKEY_COMBO" });
+  }
+
   public renderHotkeys() {
     return (
       <Hotkeys>
@@ -96,12 +102,14 @@ class GlobalHotKeys extends React.Component<Props> {
           combo="mod + k"
           global
           label="Show omnibar"
-          onKeyDown={(e: KeyboardEvent) => {
+          onKeyDown={(e) => this.onOnmnibarHotKeyDown(e)}
-            console.log("toggleShowGlobalSearchModal");
+        />
-            e.preventDefault();
+        <Hotkey
-            this.props.toggleShowGlobalSearchModal();
+          allowInInput={false}
-            AnalyticsUtil.logEvent("OPEN_OMNIBAR", { source: "HOTKEY_COMBO" });
+          combo="mod + p"
-          }}
+          global
+          label="Show omnibar"
+          onKeyDown={(e) => this.onOnmnibarHotKeyDown(e)}
         />
         <Hotkey
           combo="mod + d"

app/client/src/utils/AnalyticsUtil.tsx

@@ -122,7 +122,8 @@ export type EventName =
   | "DEBUGGER_ENTITY_NAVIGATION"
   | "GSHEET_AUTH_INIT"
   | "GSHEET_AUTH_COMPLETE"
-  | "CYCLICAL_DEPENDENCY_ERROR";
+  | "CYCLICAL_DEPENDENCY_ERROR"
+  | "DISCORD_LINK_CLICK";
 
 function getApplicationId(location: Location) {
   const pathSplit = location.pathname.split("/");