void;
+ onModalClose?: () => void;
children: ReactNode;
width?: number;
className?: string;
@@ -76,6 +77,14 @@ export function ModalComponent(props: ModalComponentProps) {
const modalContentRef: RefObject
= useRef(
null,
);
+ useEffect(() => {
+ return () => {
+ // handle modal close events when this component unmounts
+ // will be called in all cases :-
+ // escape key press, click out side, close click from other btn widget
+ if (props.onModalClose) props.onModalClose();
+ };
+ }, []);
useEffect(() => {
if (!props.scrollContents) {
modalContentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
diff --git a/app/client/src/components/editorComponents/EditableText.tsx b/app/client/src/components/editorComponents/EditableText.tsx
index b8c2983a02..baa81e42c0 100644
--- a/app/client/src/components/editorComponents/EditableText.tsx
+++ b/app/client/src/components/editorComponents/EditableText.tsx
@@ -92,10 +92,25 @@ const TextContainer = styled.div<{ isValid: boolean; minimal: boolean }>`
`;
export function EditableText(props: EditableTextProps) {
- const [isEditing, setIsEditing] = useState(!!props.isEditingDefault);
- const [value, setStateValue] = useState(props.defaultValue);
+ const {
+ beforeUnmount,
+ className,
+ defaultValue,
+ editInteractionKind,
+ forceDefault,
+ hideEditIcon,
+ isEditingDefault,
+ isInvalid,
+ minimal,
+ onBlur,
+ onTextChanged,
+ placeholder,
+ updating,
+ valueTransform,
+ } = props;
+ const [isEditing, setIsEditing] = useState(!!isEditingDefault);
+ const [value, setStateValue] = useState(defaultValue);
const inputValRef = useRef("");
- const { beforeUnmount } = props;
const setValue = useCallback((value) => {
inputValRef.current = value;
@@ -103,16 +118,16 @@ export function EditableText(props: EditableTextProps) {
}, []);
useEffect(() => {
- setValue(props.defaultValue);
- }, [props.defaultValue]);
+ setValue(defaultValue);
+ }, [defaultValue]);
useEffect(() => {
- setIsEditing(!!props.isEditingDefault);
- }, [props.defaultValue, props.isEditingDefault]);
+ setIsEditing(!!isEditingDefault);
+ }, [defaultValue, isEditingDefault]);
useEffect(() => {
- if (props.forceDefault === true) setValue(props.defaultValue);
- }, [props.forceDefault, props.defaultValue]);
+ if (forceDefault === true) setValue(defaultValue);
+ }, [forceDefault, defaultValue]);
// at times onTextChange is not fired
// for example when the modal is closed on clicking the overlay
@@ -128,58 +143,63 @@ export function EditableText(props: EditableTextProps) {
e.preventDefault();
e.stopPropagation();
};
- const onChange = (_value: string) => {
- props.onBlur && props.onBlur();
- const isInvalid = props.isInvalid ? props.isInvalid(_value) : false;
- if (!isInvalid) {
- props.onTextChanged(_value);
- setIsEditing(false);
- } else {
- Toaster.show({
- text: "Invalid name",
- variant: Variant.danger,
- });
- }
- };
+ const onChange = useCallback(
+ (_value: string) => {
+ onBlur && onBlur();
+ const _isInvalid = isInvalid ? isInvalid(_value) : false;
+ if (!_isInvalid) {
+ onTextChanged(_value);
+ setIsEditing(false);
+ } else {
+ Toaster.show({
+ text: "Invalid name",
+ variant: Variant.danger,
+ });
+ }
+ },
+ [isInvalid],
+ );
- const onInputchange = (_value: string) => {
- let finalVal: string = _value;
- if (props.valueTransform) {
- finalVal = props.valueTransform(_value);
- }
- setValue(finalVal);
- };
+ const onInputchange = useCallback(
+ (_value: string) => {
+ let finalVal: string = _value;
+ if (valueTransform) {
+ finalVal = valueTransform(_value);
+ }
+ setValue(finalVal);
+ },
+ [valueTransform],
+ );
- const errorMessage = props.isInvalid && props.isInvalid(value);
+ const errorMessage = isInvalid && isInvalid(value);
const error = errorMessage ? errorMessage : undefined;
return (
-
+
- {!props.minimal &&
- !props.hideEditIcon &&
- !props.updating &&
- !isEditing && }
+ {!minimal && !hideEditIcon && !updating && !isEditing && (
+
+ )}
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() {
)}